feat: 完善组件样式

src/web/staticres/diy-report/css/report-list.css

@@ -0,0 +1,67 @@
+.info-card-group {
+    padding: 20px;
+    box-sizing: border-box;
+    background: #F4F5F7;
+    font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
+
+}
+.info-card-group .info-card-item + .info-card-item {
+    margin-top: 17px;
+}
+.info-card-group .info-card-item {
+    background: #FFFFFF;
+    box-shadow: 0px 2px 8px 1px rgba(54, 147, 179, 0.05);
+    border-radius: 8px;
+    padding: 16px 12px;
+    box-sizing: border-box;
+    font-size: 13px;
+    font-weight: 500;
+    color: #5E5E64;
+    line-height: 20px;
+}
+.info-card-item .text-title {
+    font-size: 15px;
+    font-weight: 500;
+    color: #161826;
+    line-height: 22px;
+}
+.info-flex-r-box {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+.info-card-item .info-content-group {
+    margin-top: 8px;
+}
+.info-card-item .info-content-group .info-content-label {
+    flex-shrink: 0;
+}
+.info-card-item .info-content-group .info-flex-r-box {
+    margin-top: 4px;
+    align-items: flex-start;
+    justify-content: flex-start;
+}
+.info-card-item button {
+    display: block;
+    margin: 0 auto;
+    margin-top: 12px;
+    width: 271px;
+    height: 36px;
+    background: #2CB7CA;
+    border-radius: 6px;
+    font-size: 16px;
+    font-weight: 400;
+    color: #FFFFFF;
+    border: none;
+}
+.info-card-item .toggle-row-box i {
+    font-size: 16px;
+    margin-left: 2px;
+}
+.info-card-item .toggle-row-box {
+    color: #2ABDD1;
+}
+[v-cloak] {
+    opacity: 0;
+}

src/web/staticres/diy-report/js/report-list.js

@@ -38,75 +38,6 @@ if (typeof Date.prototype.pattern !== 'function') {
     }
 }
 var reportListTemplate = `
-<style>
-        .info-card-group {
-            padding: 20px;
-            box-sizing: border-box;
-            background: #F4F5F7;
-            font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
-
-        }
-        .info-card-group .info-card-item + .info-card-item {
-            margin-top: 17px;
-        }
-        .info-card-group .info-card-item {
-            background: #FFFFFF;
-            box-shadow: 0px 2px 8px 1px rgba(54, 147, 179, 0.05);
-            border-radius: 8px;
-            padding: 16px 12px;
-            box-sizing: border-box;
-            font-size: 13px;
-            font-weight: 500;
-            color: #5E5E64;
-            line-height: 20px;
-        }
-        .info-card-item .text-title {
-            font-size: 15px;
-            font-weight: 500;
-            color: #161826;
-            line-height: 22px;
-        }
-        .info-flex-r-box {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            justify-content: space-between;
-        }
-        .info-card-item .info-content-group {
-            margin-top: 8px;
-        }
-        .info-card-item .info-content-group .info-content-label {
-            flex-shrink: 0;
-        }
-        .info-card-item .info-content-group .info-flex-r-box {
-            margin-top: 4px;
-            align-items: flex-start;
-            justify-content: flex-start;
-        }
-        .info-card-item button {
-            display: block;
-            margin: 0 auto;
-            margin-top: 12px;
-            width: 271px;
-            height: 36px;
-            background: #2CB7CA;
-            border-radius: 6px;
-            font-size: 16px;
-            font-weight: 400;
-            color: #FFFFFF;
-            border: none;
-        }
-        .info-card-item .toggle-row-box i {
-            font-size: 16px;
-            margin-left: 2px;
-        }
-        .info-card-item .toggle-row-box {
-            color: #2ABDD1;
-        }
-        [v-cloak] {
-            opacity: 0;
-        }
-</style>
     <div id="reportList" class="info-card-group" v-cloak>
         <van-list
                 v-model="listState.loading"
@@ -163,8 +94,9 @@ var reportListTemplate = `
     </div>
 </div>
 `
-var reportListMobileComponent = new Vue({
-    el: '#test',
+var reportListMobileComponent = {
+    name: 'report-list',
+    template: reportListTemplate,
     delimiters: ['@@', '@@'],
     data: function () {
         return {
@@ -213,7 +145,7 @@ var reportListMobileComponent = new Vue({
     methods: {
         goReport: function (id) {
             console.log(id)
-            this.$emit('goReport', id)
+            this.$emit('go-report', id)
         },
         getList: function () {
             var tempRes = {
@@ -308,4 +240,4 @@ var reportListMobileComponent = new Vue({
             })
         }
     }
-})
+}