推样表改版

sample-form-client-ui/admin/README.md

@@ -29,3 +29,7 @@ yarn lint
 See [Configuration Reference](https://cli.vuejs.org/config/).
 
 http://localhost:8081?v=409&serveinfo={"deviceInfo":{"enabled":1,"productId":10,"productName":"样表机","siteCode":"","siteId":1,"siteName":"","source":1},"rabbmitInfo":{"downTopicFilter":"/down/C0-FB-F9-CD-3B-A4","exchangeName":"phxt.pdj","host":"10.12.185.213","messageTtl":"86400000","password":"admin@2020","port":5672,"uploadTopicFilter":"/upload/C0-FB-F9-CD-3B-A4","username":"taxi_mq","virtualHost":"/test"},"serviceInfo":{"homeUrl":"","serverUrl":"http://192.168.0.98:11078/"}}&devicenum=18-93-7F-C0-AD-B5
+
+### 效果图
+
+/_![示例图片](./src/assets/img/baseImg.png) _/

sample-form-client-ui/admin/src/App.vue

@@ -216,7 +216,7 @@ export default {
   --gradient-ramp-assist3: #48fca5;
 }
 .main-bg-img {
-  background: url("./assets/img/bg(1).jpg") no-repeat;
+  background: url("./assets/img/reg-bg.jpg") no-repeat;
 }
 .main-ksck-img {
   background: url("./assets/img/btn_kuaisu.png") no-repeat;

sample-form-client-ui/admin/src/pages/home/Home.vue

@@ -30,7 +30,7 @@
     </div>
     <!-- 搜索 -->
     <div class="flex flexc aic">
-      <img class="mb32" width="700" src="../../assets/img/png_title@2x.png" />
+      <!-- <img class="mb32" width="700" src="../../assets/img/png_title@2x.png" /> -->
       <div class="search-box">
         <el-input
           v-model="search"
@@ -68,10 +68,10 @@
         </el-button>
       </div>
       <div class="hot-search-box flex aic mt28">
-        <div class="hot-title flex aic jca">
+        <!-- <div class="hot-title flex aic jca">
           <img src="../../assets/img/icon_hot.png" />
           <span>热门词汇：</span>
-        </div>
+        </div> -->
         <div
           @click="handleClick($event)"
           v-onEvent="{
@@ -102,7 +102,6 @@
                 <span :data-value="v" v-else class="hot-search-item">{{
                   v.slice(0, 6) + "..."
                 }}</span>
-                <span class="line"></span>
               </div>
             </div>
           </vue-seamless-scroll>
@@ -111,12 +110,10 @@
     </div>
     <!-- 主体 -->
     <div class="main flex aic">
-      <div class="ranking mr25 flex flexc">
-        <div>
-          <img
-            class="ranking-title"
-            src="../../assets/img/pic__hot_biaoqian.png"
-          />
+      <div class="ranking flex flexc">
+        <div class="flex ranking-title">
+          <img class="title_img" src="../../assets/img/reg-icon_hot.png" />
+          <p class="title_txt">热门表单</p>
         </div>
         <!-- 热门表单列表 -->
         <div class="ranking-list flex1 flex flexc mt20">
@@ -127,7 +124,20 @@
               :key="v.id"
             >
               <div class="flex aic jcc item-index">
-                <img v-if="i < 3" :src="checkTopImg(i)" />
+                <span
+                  v-if="i < 3"
+                  :style="{
+                    color:
+                      i == 0
+                        ? '#FF5948'
+                        : i == 1
+                        ? '#FF6F48'
+                        : i == 2
+                        ? '#FF8D48'
+                        : '#565656',
+                  }"
+                  >{{ i + 1 }}.</span
+                >
                 <span v-else>{{ i + 1 }}.</span>
               </div>
               <p
@@ -144,13 +154,14 @@
               >
                 {{ v.materialName ? v.materialName : v.materiaFullName }}
               </p>
+              <p v-if="i < 3" class="text_hot">热</p>
             </div>
           </div>
           <div v-else class="tac empty-text">暂无数据</div>
         </div>
       </div>
-      <div class="right flex flexc aic jcb">
-        <div class="right-top flex aic jcb">
+      <div class="right flex flexc">
+        <div class="right-top">
           <router-link
             to="/matterList"
             v-onEvent="{
@@ -161,22 +172,20 @@
               routers: $route,
             }"
           >
-            <div class="fill-btn flex aic jcc pointer main-ksck-img">
-              <span class="fill-btn-text1">快</span>
-              <span class="fill-btn-text2">速</span>
-              <span class="fill-btn-text3">查</span>
-              <span class="fill-btn-text4">看</span>
+            <div class="top_img_box">
+              <div class="top_img_text_box">
+                <h3 class="text_box_title">快速查看</h3>
+                <p class="text_box_desc">多种样表快捷查看</p>
+              </div>
+              <img src="../../assets/img/reg-quickbg.png" alt="" />
             </div>
           </router-link>
         </div>
         <!-- 热门事项 -->
         <div class="right-bottom flex flexc">
-          <div>
-            <img
-              height="45"
-              class="hot-matter-title"
-              src="../../assets/img/pic__hot_shixiang.png"
-            />
+          <div class="flex ranking-title">
+            <img class="title_img" src="../../assets/img/reg-icon_hot.png" />
+            <p class="title_txt">热门事项</p>
           </div>
           <div
             class="hot-matter-list flex1 mt10"
@@ -188,7 +197,20 @@
               :key="v.id"
             >
               <div class="flex aic jcc item-index">
-                <img v-if="i < 3" :src="checkTopImg(i)" />
+                <span
+                  v-if="i < 3"
+                  :style="{
+                    color:
+                      i == 0
+                        ? '#FF5948'
+                        : i == 1
+                        ? '#FF6F48'
+                        : i == 2
+                        ? '#FF8D48'
+                        : '#565656',
+                  }"
+                  >{{ i + 1 }}.</span
+                >
                 <span v-else>{{ i + 1 }}.</span>
               </div>
               <p
@@ -205,6 +227,7 @@
               >
                 {{ v.matterName ? v.matterName : v.matterFullName }}
               </p>
+              <p v-if="i < 3" class="text_hot">热</p>
             </div>
           </div>
           <div v-else class="tac empty-text">暂无数据</div>
@@ -268,7 +291,7 @@ export default {
       return {
         direction: 2, // 滚动方向
         step: 0.5, // 数值越大速度滚动越快
-        limitMoveNum: 5, // 开启无缝滚动的数据量 设置(数值<=页面展示数据条数不滚)(超过页面展示条数滚动)
+        limitMoveNum: 100, // 开启无缝滚动的数据量 设置(数值<=页面展示数据条数不滚)(超过页面展示条数滚动)
         openWatch: true, // 开启数据实时监控刷新dom
         waitTime: 2500, // 单行停顿时间(singleHeight,waitTime)
       };
@@ -466,16 +489,23 @@ export default {
     background-color: rgba(255, 255, 255, 0.1);
   }
   .seamless-warp2 {
-    width: 750px;
+    width: 880px;
     overflow: hidden;
   }
 
   .hot-search-item {
-    width: 150px;
-    height: 24px;
+    width: 170px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 42px;
     font-size: 22px;
     text-align: center;
     cursor: pointer;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 20px;
+    margin-right: 20px;
+    padding: 0 10px;
   }
   .line {
     display: inline-block;
@@ -530,14 +560,38 @@ export default {
 }
 .main {
   margin-top: 40px;
+  .ranking-title {
+    width: 100%;
+    padding-left: 25px;
+    align-items: center;
+
+    .title_txt {
+      font-size: 28px;
+      font-family: Source Han Sans CN;
+      font-weight: bold;
+      color: #f84403;
+      margin-left: 10px;
+    }
+  }
+  .text_hot {
+    width: 24px;
+    height: 24px;
+    background: #ff5614;
+    border-radius: 4px;
+    color: #fff;
+    text-align: center;
+    font-size: 20px;
+    line-height: 24px;
+  }
   .ranking {
-    width: 700px;
-    height: 495px;
-    background: linear-gradient(180deg, #fdefed, #fffdf8);
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
-    border-radius: 16px;
-    border: 3px solid #ffffff;
+    width: 650px;
+    height: 570px;
+    background: #ffffff;
+    border-radius: 24px 24px 4px 4px;
     position: relative;
+    padding-top: 25px;
+    padding-right: 20px;
+
     .empty-text {
       font-size: 18px;
       color: #999;
@@ -554,8 +608,9 @@ export default {
         margin-bottom: 10px;
         line-height: 56px;
         border-radius: 8px;
-        font-size: 28px;
-        color: var(--main-theme-color);
+        font-size: 24px;
+        font-family: Source Han Sans CN;
+        font-weight: 500;
         letter-spacing: 2px;
         cursor: pointer;
         &:nth-child(2n-1) {
@@ -568,8 +623,41 @@ export default {
     }
   }
   .right {
-    width: 530px;
-    height: 495px;
+    width: 612px;
+    height: 520px;
+    background: rgba(255, 255, 255, 0.7);
+    border-radius: 0px 24px 24px 0px;
+    .right-top {
+      width: 100%;
+      padding: 27px 48px;
+      padding-right: 0;
+      padding-bottom: 20px;
+
+      .top_img_box {
+        position: relative;
+        .top_img_text_box {
+          position: absolute;
+          top: 50%;
+          left: 8%;
+          transform: translateY(-50%);
+          .text_box_title {
+            font-size: 42px;
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            color: #ffffff;
+            text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);
+          }
+          .text_box_desc {
+            font-size: 18px;
+            font-family: Source Han Sans CN;
+            font-weight: 400;
+            color: #ffffff;
+            margin-top: 10px;
+            letter-spacing: 2px;
+          }
+        }
+      }
+    }
     .fill-btn {
       width: 530px;
       height: 170px;
@@ -621,13 +709,10 @@ export default {
       color: #ffffff;
     }
     .right-bottom {
-      width: 530px;
+      width: 100%;
       height: 304px;
-      background: #fff;
-      border: 3px solid #ffffff;
-      border-radius: 16px;
-      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
       position: relative;
+      padding-left: 25px;
       .empty-text {
         font-size: 18px;
         color: #999;
@@ -639,18 +724,19 @@ export default {
       .hot-matter-list {
         height: 130px;
         padding: 0px 14px;
+        padding-top: 10px;
+        padding-right: 70px;
         overflow: hidden;
         .seamless-warp {
           height: 100%;
           overflow: hidden;
         }
         .hot-matter-item {
-          height: 45px;
-          margin-bottom: 4px;
-          line-height: 45px;
-          border-radius: 8px;
-          font-size: 26px;
-          color: var(--main-theme-color);
+          margin-bottom: 25px;
+          font-size: 24px;
+          font-family: Source Han Sans CN;
+          font-weight: 500;
+          color: #565656;
           letter-spacing: 2px;
           cursor: pointer;
           &:nth-child(2n) {