v1.7版本页面绘制

components/SimpleDialog/index.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="simple-dialog" v-if="value">
+    <div class="simple-dialog__container">
+      <span
+        class="el-icon-close simple-dialog__colse"
+        @click="onCloseClick"
+      ></span>
+      <div class="simple-dialog__title">
+        <span class="simple-dialog__title__text">提示</span>
+        <slot name="title"></slot>
+      </div>
+      <div class="simple-dialog__content">
+        <slot></slot>
+        <span class="simple-dialog__content__text">这是内容</span>
+      </div>
+      <div class="simple-dialog__footer">
+        <slot name="footer"></slot>
+        <div
+          class="simple-dialog__confirm"
+          v-if="!$slots.footer"
+          @click="onClick"
+        >
+          确定
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+  props: {
+    value: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    onCloseClick() {
+      this.$emit('change', false)
+    },
+    onClick() {
+      this.$emit('click')
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.simple-dialog {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.39);
+
+  .simple-dialog__container {
+    position: relative;
+    width: 76vw;
+    min-height: 20vw;
+    background: #fff;
+
+    .simple-dialog__colse {
+      width: 6.4vw;
+      height: 6.4vw;
+      font-size: 5vw;
+      position: absolute;
+      top: 3vw;
+      right: 3vw;
+      text-align: center;
+      line-height: 6.4vw;
+      color: #c2c2c2;
+    }
+
+    .simple-dialog__title {
+      padding: 3vw 4.8vw;
+      border-bottom: 1px solid #c2c2c2;
+      .simple-dialog__title__text {
+        font-size: 4.2vw;
+        color: #282828;
+      }
+    }
+
+    .simple-dialog__content {
+      padding: 3vw 4.8vw;
+
+      .simple-dialog__content__text {
+        font-size: 3.6vw;
+        color: #282828;
+      }
+    }
+
+    .simple-dialog__footer {
+      padding: 0 4.8vw 7vw;
+      .simple-dialog__confirm {
+        width: 100%;
+        height: 8.8vw;
+        text-align: center;
+        background: #f3920d;
+        color: #fff;
+        line-height: 8.8vw;
+        font-size: 3.6vw;
+      }
+    }
+  }
+}
+</style>

pages/_template/app/approve/club/detail.vue

@@ -191,11 +191,9 @@ export default {
     overflow-y: auto;
     .club-info {
       padding: 32px 24px;
-      background: linear-gradient(
-        180deg,
-        #ffe6e8 0%,
-        rgba(255, 255, 255, 0) 100%
-      );
+      @include themify($themes) {
+        background: themed('cover-color');
+      }
 
       .info {
         width: 320px;
@@ -228,12 +226,16 @@ export default {
         }
         .mobile {
           &::after {
-            background-image: url(https://static.caimei365.com/www/authentic/pc/icon-phone-active.png);
+            @include themify($themes) {
+              background-image: themed('icon-phone-active-pc');
+            }
           }
         }
         .address {
           &::after {
-            background-image: url(https://static.caimei365.com/www/authentic/pc/icon-address-active.png);
+            @include themify($themes) {
+              background-image: themed('icon-address-active-pc');
+            }
           }
         }
       }
@@ -265,11 +267,12 @@ export default {
         width: 72px;
         height: 32px;
         border-radius: 4px;
-        background-color: #ffe6e8;
+
         font-size: 16px;
         @include themify($themes) {
           color: themed('color');
           border: 1px solid themed('color');
+          background-color: themed('sub-color');
         }
         cursor: pointer;
 
@@ -278,8 +281,9 @@ export default {
           display: block;
           width: 16px;
           height: 16px;
-          background: url(https://static.caimei365.com/www/authentic/pc/icon-arround-right.png)
-            no-repeat center;
+          @include themify($themes) {
+            background: themed('icon-arround-right-pc') no-repeat center;
+          }
           background-size: 16px;
         }
       }
@@ -360,11 +364,9 @@ export default {
     }
     .club-info {
       padding: 4vw;
-      background: linear-gradient(
-        180deg,
-        #ffe6e8 0%,
-        rgba(255, 255, 255, 0) 100%
-      );
+      @include themify($themes) {
+        background: themed('cover-color');
+      }
 
       .info {
         width: 67vw;
@@ -397,12 +399,16 @@ export default {
         }
         .mobile {
           &::after {
-            background-image: url(https://static.caimei365.com/www/authentic/h5/icon-phone-active.png);
+            @include themify($themes) {
+              background-image: themed('icon-phone-active-h5');
+            }
           }
         }
         .address {
           &::after {
-            background-image: url(https://static.caimei365.com/www/authentic/h5/icon-address-active.png);
+            @include themify($themes) {
+              background-image: themed('icon-address-active-h5');
+            }
           }
         }
       }
@@ -434,11 +440,11 @@ export default {
         width: 14.4vw;
         height: 6.4vw;
         border-radius: 0.4vw;
-        background-color: #ffe6e8;
         font-size: 3.2vw;
         @include themify($themes) {
           color: themed('color');
           border: 1px solid themed('color');
+          background-color: themed('sub-color');
         }
 
         &::after {
@@ -446,8 +452,9 @@ export default {
           display: block;
           width: 3.6vw;
           height: 3.6vw;
-          background: url(https://static.caimei365.com/www/authentic/h5/icon-arround-right.png)
-            no-repeat center;
+          @include themify($themes) {
+            background: themed('icon-arround-right-h5') no-repeat center;
+          }
           background-size: 3.6vw;
         }
       }

pages/_template/app/form/club-register.vue

@@ -8,7 +8,7 @@
       ></div>
     </div>
     <div class="page-content">
-      <template v-if="true">
+      <template v-if="false">
         <!-- 进步条 -->
         <SimpleStep :list="stepList" :active="step" />
 
@@ -167,7 +167,7 @@ export default {
           background-image: url(https://static.caimei365.com/www/authentic/pc/icon-auth-danger.png);
         }
       }
-
+ 
       .status {
         font-size: 18px;
         color: #282828;
@@ -250,33 +250,34 @@ export default {
       justify-content: center;
       align-items: center;
       flex-direction: column;
+      margin: 22.8vw 0;
       .status-icon {
-        width: 88px;
-        height: 88px;
+        width: 23.6vw;
+        height: 23.6vw;
         background-repeat: no-repeat;
-        background-size: 75px auto;
+        background-size: 20vw auto;
         background-position: center;
 
         &.success {
-          background-image: url(https://static.caimei365.com/www/authentic/pc/icon-auth-primary.png);
+          background-image: url(https://static.caimei365.com/www/authentic/h5/icon-auth-primary.png);
         }
         &.warning {
-          background-image: url(https://static.caimei365.com/www/authentic/pc/icon-auth-warning.png);
+          background-image: url(https://static.caimei365.com/www/authentic/h5/icon-auth-warning.png);
         }
         &.danger {
-          background-image: url(https://static.caimei365.com/www/authentic/pc/icon-auth-danger.png);
+          background-image: url(https://static.caimei365.com/www/authentic/h5/icon-auth-danger.png);
         }
       }
 
       .status {
-        font-size: 18px;
+        font-size: 4.2vw;
         color: #282828;
-        margin: 12px 0;
+        margin: 3.2vw 0 2.4vw;
       }
 
       .tip {
         color: #999999;
-        font-size: 14px;
+        font-size: 3.2vw;
       }
     }
 
@@ -301,6 +302,7 @@ export default {
         }
       }
       .record {
+        margin-top: 4.8vw;
         font-size: 3.4vw;
         cursor: pointer;
         @include themify($themes) {

pages/_template/app/form/components/form-club-device.vue

@@ -79,82 +79,172 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.el-select {
-  width: 100%;
-}
-.device-param-list {
-  position: relative;
-  .add-param {
-    position: absolute;
+// pc端
+@media screen and (min-width: 768px) {
+  .el-select {
+    width: 100%;
+  }
+  .device-param-list {
+    position: relative;
+    .add-param {
+      position: absolute;
+      cursor: pointer;
+      top: -40px;
+      right: 0;
+      text-decoration: underline;
+      font-size: 14px;
+      @include themify($themes) {
+        color: themed('color');
+      }
+    }
+
+    .param {
+      position: relative;
+      .remove {
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 20px;
+        height: 20px;
+        background: #f94b4b;
+        border-radius: 2px;
+        cursor: pointer;
+        color: #fff;
+        font-size: 14px;
+        text-align: center;
+        line-height: 20px;
+      }
+    }
+  }
+
+  .add-device {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 162px;
+    height: 46px;
+    border-radius: 4px;
+    box-sizing: border-box;
+    font-size: 18px;
+    margin: 0 auto;
     cursor: pointer;
-    top: -40px;
-    right: 0;
-    text-decoration: underline;
-    font-size: 14px;
+
     @include themify($themes) {
+      border: 1px solid themed('color');
       color: themed('color');
     }
-  }
 
-  .param {
-    position: relative;
-    .remove {
-      position: absolute;
-      right: 0;
-      top: 0;
+    .add-icon {
       width: 20px;
       height: 20px;
-      background: #f94b4b;
-      border-radius: 2px;
-      cursor: pointer;
-      color: #fff;
-      font-size: 14px;
-      text-align: center;
-      line-height: 20px;
+      position: relative;
+      margin-right: 16px;
+
+      &::before,
+      &::after {
+        position: absolute;
+        width: 3px;
+        height: 20px;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        border-radius: 1px;
+        content: '';
+        display: block;
+        @include themify($themes) {
+          background: themed('color');
+        }
+      }
+      &::after {
+        transform: translate(-50%, -50%) rotateZ(90deg);
+      }
     }
   }
 }
 
-.add-device {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 162px;
-  height: 46px;
-  border-radius: 4px;
-  box-sizing: border-box;
-  font-size: 18px;
-  margin: 0 auto;
-  cursor: pointer;
-
-  @include themify($themes) {
-    border: 1px solid themed('color');
-    color: themed('color');
+// 移动端
+@media screen and (max-width: 768px) {
+  ::v-deep {
+    .el-form-item__label {
+      font-size: 3.4vw;
+    }
   }
-
-  .add-icon {
-    width: 20px;
-    height: 20px;
+  .el-select {
+    width: 100%;
+  }
+  .device-param-list {
     position: relative;
-    margin-right: 16px;
-
-    &::before,
-    &::after {
+    .add-param {
       position: absolute;
-      width: 3px;
-      height: 20px;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      border-radius: 1px;
-      content: '';
-      display: block;
+      cursor: pointer;
+      top: -40px;
+      right: 0;
+      font-size: 3.4vw;
       @include themify($themes) {
-        background: themed('color');
+        color: themed('color');
+      }
+    }
+
+    .param {
+      position: relative;
+      .remove {
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 4.4vw;
+        height: 4.4vw;
+        background: #f94b4b;
+        border-radius: 0.2vw;
+        cursor: pointer;
+        color: #fff;
+        font-size: 3.4vw;
+        text-align: center;
+        line-height: 4.4vw;
       }
     }
-    &::after {
-      transform: translate(-50%, -50%) rotateZ(90deg);
+  }
+
+  .add-device {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 31vw;
+    height: 8.8vw;
+    border-radius: 0.4vw;
+    box-sizing: border-box;
+    font-size: 3.4vw;
+    margin: 0 auto;
+    cursor: pointer;
+
+    @include themify($themes) {
+      border: 1px solid themed('color');
+      color: themed('color');
+    }
+
+    .add-icon {
+      width: 20px;
+      height: 20px;
+      position: relative;
+      margin-right: 16px;
+
+      &::before,
+      &::after {
+        position: absolute;
+        width: 0.6vw;
+        height: 4.1vw;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        border-radius: 1px;
+        content: '';
+        display: block;
+        @include themify($themes) {
+          background: themed('color');
+        }
+      }
+      &::after {
+        transform: translate(-50%, -50%) rotateZ(90deg);
+      }
     }
   }
 }

pages/_template/app/record/club/detail.vue

@@ -5,84 +5,93 @@
       <div class="name mt-2" v-text="supplierInfo.shopName + '认证记录'"></div>
     </div>
     <div class="page-content">
-      <div class="page-title">机构认证</div>
-      <div class="row">
-        <div class="col">机构名称：</div>
-        <div class="col">机构名称</div>
-      </div>
-      <div class="row">
-        <div class="col">联系电话：</div>
-        <div class="col">15889586666</div>
-      </div>
-      <div class="row">
-        <div class="col">所在地区：</div>
-        <div class="col">广东省深圳市福田区上步南路锦峰大厦A座</div>
-      </div>
-      <div class="row">
-        <div class="col">所在位置：</div>
-        <div class="col">广东省深圳市福田区上步南路锦峰大厦A座</div>
-      </div>
-      <div class="row">
-        <div class="col">logo：</div>
-        <div class="col">
-          <el-image
-            src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpe"
-          ></el-image>
+      <template v-if="true">
+        <div class="page-title">机构认证</div>
+        <div class="row">
+          <div class="col">机构名称：</div>
+          <div class="col">机构名称</div>
         </div>
-      </div>
-      <div class="row">
-        <div class="col">logo：</div>
-        <div class="col">
-          <el-image
-            src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpe"
-          ></el-image>
-          <el-image
-            src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpe"
-          ></el-image>
-          <el-image
-            src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpe"
-          ></el-image>
+        <div class="row">
+          <div class="col">联系电话：</div>
+          <div class="col">15889586666</div>
         </div>
-      </div>
-      <div class="row">
-        <div class="col">机构类型：</div>
-        <div class="col">医美</div>
-      </div>
-      <div class="row">
-        <div class="col">医美类型：</div>
-        <div class="col">诊所</div>
-      </div>
-      <div class="row">
-        <div class="col">员工人数：</div>
-        <div class="col">12</div>
-      </div>
-      <div class="row">
-        <div class="col">状态：</div>
-        <div class="col">认证中</div>
-      </div>
-
-      <div class="control flex flex-col items-center">
-        <div
-          class="button edit flex justify-center items-center mb-2"
-          @click="onEdit"
-        >
-          编辑
+        <div class="row">
+          <div class="col">所在地区：</div>
+          <div class="col">广东省深圳市福田区上步南路锦峰大厦A座</div>
         </div>
-        <div
-          class="button search flex justify-center items-center"
-          @click="onToDeviceList"
-        >
-          查看认证设备
+        <div class="row">
+          <div class="col">所在位置：</div>
+          <div class="col">广东省深圳市福田区上步南路锦峰大厦A座</div>
         </div>
-      </div>
+        <div class="row">
+          <div class="col max-width">logo：</div>
+          <div class="col">
+            <el-image
+              src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpe"
+            ></el-image>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col max-width">logo：</div>
+          <div class="col">
+            <el-image
+              src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpe"
+            ></el-image>
+            <el-image
+              src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpe"
+            ></el-image>
+            <el-image
+              src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpe"
+            ></el-image>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col">机构类型：</div>
+          <div class="col">医美</div>
+        </div>
+        <div class="row">
+          <div class="col">医美类型：</div>
+          <div class="col">诊所</div>
+        </div>
+        <div class="row">
+          <div class="col">员工人数：</div>
+          <div class="col">12</div>
+        </div>
+        <div class="row">
+          <div class="col">状态：</div>
+          <div class="col">认证中</div>
+        </div>
+
+        <div class="control flex flex-col items-center">
+          <div
+            class="button edit flex justify-center items-center mb-2"
+            @click="onEdit"
+          >
+            编辑
+          </div>
+          <div
+            class="button search flex justify-center items-center"
+            @click="onToDeviceList"
+          >
+            查看认证设备
+          </div>
+        </div>
+      </template>
+      <template v-else>
+        <SimpleEmpty name="icon-club-empty.png" description="暂无机构认证~" />
+      </template>
     </div>
   </div>
 </template>
 
 <script>
+import SimpleEmpty from '@/components/SimpleEmpty'
 import { mapGetters } from 'vuex'
 export default {
   layout: 'app',
+  components: {
+    SimpleEmpty,
+  },
   computed: {
     ...mapGetters(['supplierInfo', 'authUserId', 'routePrefix']),
   },
@@ -186,4 +195,96 @@ export default {
     }
   }
 }
+
+@media screen and (max-width: 768px) {
+  .page {
+    background: #fff;
+  }
+
+  .page-top {
+    height: 46vw;
+    @include themify($themes) {
+      background: themed('banner-home-h5');
+      background-size: auto 46vw;
+    }
+    .logo {
+      display: block;
+      width: 14.8vw;
+      height: 14.8vw;
+      border-radius: 50%;
+      background: #fff;
+    }
+    .name {
+      font-size: 4vw;
+      color: #fff;
+    }
+  }
+
+  .page-content {
+    box-sizing: border-box;
+    padding: 8vw 7.2vw;
+
+    .page-title {
+      font-size: 4.2vw;
+      font-weight: bold;
+      text-align: center;
+      margin-bottom: 8vw;
+      color: #282828;
+    }
+
+    .row {
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      font-size: 3.4vw;
+      margin-bottom: 5.6vw;
+      flex-wrap: wrap;
+
+      .col {
+        &:first-child {
+          width: 17vw;
+          color: #666;
+
+          &.max-width {
+            width: 100% !important;
+            margin-bottom: 2.6vw;
+          }
+        }
+
+        &:last-child {
+          color: #282828;
+        }
+      }
+
+      .el-image {
+        width: 25.6vw;
+        height: 25.6vw;
+      }
+    }
+
+    .control {
+      margin-top: 22.8vw;
+      .button {
+        width: 100%;
+        height: 12vw;
+
+        cursor: pointer;
+
+        &.edit {
+          @include themify($themes) {
+            border: 1px solid themed('color');
+            color: themed('color');
+          }
+        }
+
+        &.search {
+          @include themify($themes) {
+            background-color: themed('color');
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+}
 </style>

pages/_template/app/record/club/edit.vue

@@ -25,7 +25,7 @@
               <el-option label="湖北" :value="1"> </el-option>
               <el-option label="广东" :value="1"> </el-option>
             </el-select>
-            <el-select placeholder="请选择" v-model="formData.b">
+            <el-select placeholder="请选择" v-model="formData.b" class="mx-2">
               <el-option label="湖北" :value="1"> </el-option>
               <el-option label="广东" :value="1"> </el-option>
             </el-select>
@@ -68,7 +68,6 @@
           <SimpleRadio
             :list="clubTypeList"
             type="defalut"
-            spacing="40px"
             v-model="formData.clubType"
           />
         </el-form-item>
@@ -240,4 +239,103 @@ export default {
     }
   }
 }
+
+@media screen and (max-width: 768px) {
+  ::v-deep {
+    .el-form-item__label {
+      font-size: 3.4vw;
+    }
+  }
+
+  .page {
+    background: #fff;
+  }
+
+  .page-top {
+    height: 46vw;
+    @include themify($themes) {
+      background: themed('banner-home-h5');
+      background-size: auto 46vw;
+    }
+    .logo {
+      display: block;
+      width: 14.8vw;
+      height: 14.8vw;
+      border-radius: 50%;
+      background: #fff;
+    }
+    .name {
+      font-size: 4vw;
+      color: #fff;
+    }
+  }
+
+  .page-content {
+    box-sizing: border-box;
+    padding: 8vw 7vw;
+
+    .page-title {
+      font-size: 4.2vw;
+      font-weight: bold;
+      text-align: center;
+      margin-bottom: 8vw;
+      color: #282828;
+    }
+
+    .control {
+      .button {
+        width: 100%;
+        height: 12vw;
+
+        cursor: pointer;
+
+        &.submit {
+          @include themify($themes) {
+            background-color: themed('color');
+            color: #fff;
+          }
+        }
+      }
+    }
+    .normal-row {
+      position: relative;
+      .label {
+        font-size: 14px;
+        color: #606266;
+
+        span {
+          color: #b2b2b2;
+          font-size: 2.6vw;
+        }
+      }
+      .postion-btn {
+        position: absolute;
+        top: 50%;
+        right: 0;
+        transform: translateY(-50%);
+        width: 14vw;
+        height: 6.8vw;
+        line-height: 6.8vw;
+        font-size: 3.2vw;
+        color: #fff;
+        background: #1890ff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        border-radius: 0.4vw;
+
+        &::before {
+          content: '';
+          display: inline-block;
+          width: 3.58vw;
+          height: 3.58vw;
+          background: url(https://static.caimei365.com/www/authentic/pc/icon-position.png)
+            no-repeat center;
+          background-size: 3.58vw;
+        }
+      }
+    }
+  }
+}
 </style>

pages/_template/app/record/device/detail.vue

@@ -175,4 +175,92 @@ export default {
     }
   }
 }
+
+@media screen and (max-width: 768px) {
+  .page {
+    background: #fff;
+  }
+
+  .page-top {
+    height: 46vw;
+    @include themify($themes) {
+      background: themed('banner-home-h5');
+      background-size: auto 46vw;
+    }
+    .logo {
+      display: block;
+      width: 14.8vw;
+      height: 14.8vw;
+      border-radius: 50%;
+      background: #fff;
+    }
+    .name {
+      font-size: 4vw;
+      color: #fff;
+    }
+  }
+
+  .page-content {
+    box-sizing: border-box;
+    padding: 8vw 7vw;
+
+    .page-title {
+      font-size: 4.2vw;
+      font-weight: bold;
+      text-align: center;
+      color: #282828;
+      margin-bottom: 4.6vw;
+    }
+
+    .params-list {
+      .param {
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+        margin-bottom: 8px;
+      }
+    }
+
+    .row {
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      font-size: 3.4vw;
+      margin: 5.6vw 0;
+
+      .col {
+        &:first-child {
+          width: 19vw;
+          color: #666;
+          white-space: nowrap;
+        }
+
+        &:last-child {
+          color: #282828;
+        }
+      }
+
+      .el-image {
+        width: 26vw;
+        height: 26vw;
+      }
+    }
+
+    .control {
+      margin-top: 22.8vw;
+      .button {
+        width: 100%;
+        height: 12vw;
+        cursor: pointer;
+
+        &.edit {
+          @include themify($themes) {
+            border: 1px solid themed('color');
+            color: themed('color');
+          }
+        }
+      }
+    }
+  }
+}
 </style>

pages/_template/app/record/device/edit.vue

@@ -175,4 +175,91 @@ export default {
     }
   }
 }
+
+@media screen and (max-width: 768px) {
+  .page {
+    background: #fff;
+  }
+  .page-top {
+    height: 46vw;
+    @include themify($themes) {
+      background: themed('banner-home-h5');
+      background-size: auto 46vw;
+    }
+    .logo {
+      display: block;
+      width: 14.8vw;
+      height: 14.8vw;
+      border-radius: 50%;
+      background: #fff;
+    }
+    .name {
+      font-size: 4vw;
+      color: #fff;
+    }
+  }
+  .page-content {
+    box-sizing: border-box;
+    padding: 8vw 7vw;
+
+    .page-title {
+      font-size: 4.2vw;
+      font-weight: bold;
+      text-align: center;
+      color: #282828;
+      margin-bottom: 4.6vw;
+    }
+
+    .el-select {
+      width: 100%;
+    }
+    .control {
+      .button {
+        width: 100%;
+        height: 12vw;
+
+        cursor: pointer;
+
+        &.submit {
+          @include themify($themes) {
+            background-color: themed('color');
+            color: #fff;
+          }
+        }
+      }
+    }
+
+    .device-param-list {
+      position: relative;
+      .add-param {
+        position: absolute;
+        cursor: pointer;
+        top: -40px;
+        right: 0;
+        font-size: 3.4vw;
+        @include themify($themes) {
+          color: themed('color');
+        }
+      }
+
+      .param {
+        position: relative;
+        .remove {
+          position: absolute;
+          right: 0;
+          top: 0;
+          width: 4.4vw;
+          height: 4.4vw;
+          background: #f94b4b;
+          border-radius: 0.2vw;
+          cursor: pointer;
+          color: #fff;
+          font-size: 3.4vw;
+          text-align: center;
+          line-height: 4.4vw;
+        }
+      }
+    }
+  }
+}
 </style>

pages/_template/app/record/device/index.vue

@@ -5,54 +5,62 @@
       <div class="name mt-2" v-text="supplierInfo.shopName + '认证记录'"></div>
     </div>
     <div class="page-content">
-      <div class="page-title">设备认证</div>
-
-      <div class="device-list">
-        <div class="device" @click="toEdit">
-          <div class="name">
-            <span class="label">设备名称 1：</span>
-            <span class="content">B-BEAUTY童颜皮肤管理（海宁店）</span>
-          </div>
-          <div class="status success">
-            <span class="label">状态：</span>
-            <span class="content">认证中</span>
-          </div>
-        </div>
-        <div class="device">
-          <div class="name">
-            <span class="label">设备名称 1：</span>
-            <span class="content">B-BEAUTY童颜皮肤管理（海宁店）</span>
-          </div>
-          <div class="status warning">
-            <span class="label">状态：</span>
-            <span class="content">认证通过</span>
+      <template v-if="false">
+        <div class="page-title">设备认证</div>
+        <div class="device-list">
+          <div class="device" @click="toEdit">
+            <div class="name">
+              <span class="label">设备名称 1：</span>
+              <span class="content">B-BEAUTY童颜皮肤管理（海宁店）</span>
+            </div>
+            <div class="status success">
+              <span class="label">状态：</span>
+              <span class="content">认证中</span>
+            </div>
           </div>
-        </div>
-        <div class="device">
-          <div class="name">
-            <span class="label">设备名称 1：</span>
-            <span class="content">B-BEAUTY童颜皮肤管理（海宁店）</span>
+          <div class="device">
+            <div class="name">
+              <span class="label">设备名称 1：</span>
+              <span class="content">B-BEAUTY童颜皮肤管理（海宁店）</span>
+            </div>
+            <div class="status warning">
+              <span class="label">状态：</span>
+              <span class="content">认证通过</span>
+            </div>
           </div>
-          <div class="status danger">
-            <span class="label">状态：</span>
-            <span class="content">认证未通过</span>
+          <div class="device">
+            <div class="name">
+              <span class="label">设备名称 1：</span>
+              <span class="content">B-BEAUTY童颜皮肤管理（海宁店）</span>
+            </div>
+            <div class="status danger">
+              <span class="label">状态：</span>
+              <span class="content">认证未通过</span>
+            </div>
           </div>
         </div>
-      </div>
+      </template>
+      <template v-else>
+        <SimpleEmpty name="icon-device-empty.png" description="暂无机构认证~" />
+      </template>
     </div>
   </div>
 </template>
 
 <script>
+import SimpleEmpty from '@/components/SimpleEmpty'
 import { mapGetters } from 'vuex'
 export default {
   layout: 'app',
+  components: {
+    SimpleEmpty,
+  },
   computed: {
     ...mapGetters(['supplierInfo', 'authUserId', 'routePrefix']),
   },
   methods: {
     toEdit() {
-      this.$router.push(`${this.routePrefix}/record/device/edit`)
+      this.$router.push(`${this.routePrefix}/record/device/detail`)
     },
   },
 }
@@ -152,4 +160,96 @@ export default {
     }
   }
 }
+
+@media screen and (max-width: 768px) {
+  .page {
+    background: #fff;
+  }
+
+  .page-top {
+    height: 46vw;
+    @include themify($themes) {
+      background: themed('banner-home-h5');
+      background-size: auto 46vw;
+    }
+    .logo {
+      display: block;
+      width: 14.8vw;
+      height: 14.8vw;
+      border-radius: 50%;
+      background: #fff;
+    }
+    .name {
+      font-size: 4vw;
+      color: #fff;
+    }
+  }
+
+  .page-content {
+    box-sizing: border-box;
+    padding: 8vw 7vw;
+
+    .page-title {
+      font-size: 4.2vw;
+      font-weight: bold;
+      text-align: center;
+      color: #282828;
+      margin-bottom: 4.6vw;
+    }
+
+    .device-list {
+      .device {
+        position: relative;
+        padding: 2.6vw 0;
+        border-bottom: 0.1vw solid #c2c2c2;
+        cursor: pointer;
+
+        .name {
+          margin-bottom: 2.2vw;
+        }
+
+        .label {
+          font-size: 3.4vw;
+          color: #666;
+        }
+
+        .content {
+          font-size: 3.4vw;
+          color: #282828;
+        }
+        .status {
+          &.success {
+            .content {
+              color: #f3920d;
+            }
+          }
+          &.warning {
+            .content {
+              color: #1890ff;
+            }
+          }
+          &.danger {
+            .content {
+              color: #f94b4b;
+            }
+          }
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          right: 0;
+          top: 50%;
+          transform: translateY(-50%);
+          display: block;
+          width: 20px;
+          height: 20px;
+          background: url(https://static.caimei365.com/www/authentic/pc/icon-detail-more.png)
+            no-repeat center;
+          background-size: 18px;
+        }
+      }
+    }
+  }
+}
 </style>

pages/_template/app/record/search.vue

@@ -88,4 +88,51 @@ export default {
     }
   }
 }
+
+@media screen and (max-width: 768px) {
+  .page {
+    background: #fff;
+  }
+
+  .page-top {
+    height: 46vw;
+    @include themify($themes) {
+      background: themed('banner-home-h5');
+      background-size: auto 46vw;
+    }
+    .logo {
+      display: block;
+      width: 14.8vw;
+      height: 14.8vw;
+      border-radius: 50%;
+      background: #fff;
+    }
+    .name {
+      font-size: 4vw;
+      color: #fff;
+    }
+  }
+
+  .page-content {
+    padding: 0 7.2vw;
+    padding-top: 18vw;
+    box-sizing: border-box;
+
+    .control {
+      margin-top: 12.8vw;
+      .button {
+        width: 100%;
+        height: 12vw;
+        cursor: pointer;
+
+        &.search {
+          @include themify($themes) {
+            background-color: themed('color');
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+}
 </style>

pages/_template/app/user/forget.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="logo-form">
+    <div class="form-item">
+      <input type="text" placeholder="手机号" />
+    </div>
+    <div class="form-item">
+      <input type="text" placeholder="验证码" />
+    </div>
+    <div class="form-item">
+      <input type="text" placeholder="输入8-12位密码" />
+      <span class="send">发送验证码</span>
+    </div>
+    <div class="form-control">
+      <div class="submit">登录</div>
+      <div class="control flex justify-between items-center mt-3">
+        <span class="forget">忘记密码?</span>
+        <span class="register">立即注册</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.logo-form {
+  padding: 7.2vw;
+  .form-item {
+    position: relative;
+    padding: 2.5vw 0;
+    border-bottom: 1px solid #d8d8d8;
+    margin-bottom: 3.2vw;
+
+    .send {
+      position: absolute;
+      right: 0;
+      bottom: 2.5vw;
+      font-size: 3.6vw;
+      color: #f3920d;
+    }
+  }
+
+  .form-control {
+    margin-top: 20.8vw;
+    .submit {
+      width: 100%;
+      height: 12vw;
+      text-align: center;
+      line-height: 12vw;
+      background: #f3920d;
+      color: #fff;
+    }
+
+    .control {
+      font-size: 3.6vw;
+
+      .forget {
+        color: #f3920d;
+      }
+      .register {
+        color: #f3920d;
+      }
+    }
+  }
+}
+</style>

pages/_template/app/user/login.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="logo-form">
+    <div class="form-item">
+      <input type="text" placeholder="手机号" />
+    </div>
+    <div class="form-item">
+      <input type="text" placeholder="验证码" />
+    </div>
+    <div class="form-control">
+      <div class="submit" @click="active = true">登录</div>
+      <div class="control flex justify-between items-center mt-3">
+        <span class="forget">忘记密码?</span>
+        <span class="register">立即注册</span>
+      </div>
+    </div>
+    <SimpleDialog v-model="active" @click="onClick" />
+  </div>
+</template>
+
+<script>
+import SimpleDialog from '@/components/SimpleDialog'
+export default {
+  components: {
+    SimpleDialog,
+  },
+  data() {
+    return {
+      active: false,
+    }
+  },
+
+  methods: {
+    onClick() {
+      this.active = false
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.logo-form {
+  padding: 7.2vw;
+  .form-item {
+    position: relative;
+    padding: 2.5vw 0;
+    border-bottom: 1px solid #d8d8d8;
+    margin-bottom: 3.2vw;
+
+    input {
+      &::placeholder {
+        color: #b2b2b2;
+        font-size: 3.4vw;
+      }
+    }
+
+    .send {
+      position: absolute;
+      right: 0;
+      bottom: 2.5vw;
+      font-size: 3.6vw;
+      color: #f3920d;
+    }
+  }
+
+  .form-control {
+    margin-top: 20.8vw;
+    .submit {
+      width: 100%;
+      height: 12vw;
+      text-align: center;
+      line-height: 12vw;
+      background: #f3920d;
+      color: #fff;
+    }
+
+    .control {
+      font-size: 3.6vw;
+
+      .forget {
+        color: #f3920d;
+      }
+      .register {
+        color: #f3920d;
+      }
+    }
+  }
+}
+</style>

pages/_template/app/user/register.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="logo-form">
+    <div class="form-item">
+      <input type="text" placeholder="手机号" />
+    </div>
+    <div class="form-item">
+      <input type="text" placeholder="验证码" />
+    </div>
+    <div class="form-item">
+      <input type="text" placeholder="输入8-12位密码" />
+      <span class="send">发送验证码</span>
+    </div>
+    <div class="form-control">
+      <div class="submit">登录</div>
+      <div class="control flex justify-between items-center mt-3">
+        <span class="forget">忘记密码?</span>
+        <span class="register">立即注册</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.logo-form {
+  padding: 7.2vw;
+  .form-item {
+    position: relative;
+    padding: 2.5vw 0;
+    border-bottom: 1px solid #d8d8d8;
+    margin-bottom: 3.2vw;
+
+    .send {
+      position: absolute;
+      right: 0;
+      bottom: 2.5vw;
+      font-size: 3.6vw;
+      color: #f3920d;
+    }
+  }
+
+  .form-control {
+    margin-top: 20.8vw;
+    .submit {
+      width: 100%;
+      height: 12vw;
+      text-align: center;
+      line-height: 12vw;
+      background: #f3920d;
+      color: #fff;
+    }
+
+    .control {
+      font-size: 3.6vw;
+
+      .forget {
+        color: #f3920d;
+      }
+      .register {
+        color: #f3920d;
+      }
+    }
+  }
+}
+</style>

themes/themeVariable.scss

@@ -3,8 +3,17 @@
 $themes: (
   normal: (
     color: $color-red,
+    sub-color: #ffe6e8,
     hover-color: $color-red-hover,
+    cover-color:
+      linear-gradient(180deg, #ffe6e8 0%, rgba(255, 255, 255, 0) 100%),
     // pc端
+    icon-phone-active-pc:
+      url('https://static.caimei365.com/www/authentic/pc/icon-phone-active.png'),
+    icon-address-active-pc:
+      url('https://static.caimei365.com/www/authentic/pc/icon-address-active.png'),
+    icon-arround-right-pc:
+      url('https://static.caimei365.com/www/authentic/pc/icon-arround-right.png'),
     banner-home-pc:
       url('https://static.caimei365.com/www/authentic/pc/bg-home.png'),
     banner-approve-pc:
@@ -24,6 +33,12 @@ $themes: (
     banner-club-register:
       url('https://static.caimei365.com/www/authentic/pc/ross-bg-club-register.png'),
     // 移动端
+    icon-phone-active-h5:
+      url('https://static.caimei365.com/www/authentic/h5/icon-phone-active.png'),
+    icon-address-active-h5:
+      url('https://static.caimei365.com/www/authentic/h5/icon-address-active.png'),
+    icon-arround-right-h5:
+      url('https://static.caimei365.com/www/authentic/h5/icon-arround-right.png'),
     banner-home-h5:
       url('https://static.caimei365.com/www/authentic/h5/bg-home.png'),
     banner-approve-h5:
@@ -44,7 +59,16 @@ $themes: (
   ross: (
     color: $color-yellow,
     hover-color: $color-yellow-hover,
+    sub-color: #ffebcf,
+    cover-color:
+      linear-gradient(180deg, #ffebcf 0%, rgba(255, 255, 255, 0) 100%),
     // pc端
+    icon-phone-active-pc:
+      url('https://static.caimei365.com/www/authentic/pc/ross-icon-phone-active.png'),
+    icon-address-active-pc:
+      url('https://static.caimei365.com/www/authentic/pc/ross-icon-address-active.png'),
+    icon-arround-right-pc:
+      url('https://static.caimei365.com/www/authentic/pc/ross-icon-arround-right.png'),
     banner-home-pc:
       url('https://static.caimei365.com/www/authentic/pc/ross-bg-home.png'),
     banner-approve-pc:
@@ -64,6 +88,12 @@ $themes: (
     banner-club-register:
       url('https://static.caimei365.com/www/authentic/pc/ross-bg-club-register.png'),
     // 移动端
+    icon-phone-active-h5:
+      url('https://static.caimei365.com/www/authentic/h5/ross-icon-phone-active.png'),
+    icon-address-active-h5:
+      url('https://static.caimei365.com/www/authentic/h5/ross-icon-address-active.png'),
+    icon-arround-right-h5:
+      url('https://static.caimei365.com/www/authentic/h5/ross-icon-arround-right.png'),
     banner-home-h5:
       url('https://static.caimei365.com/www/authentic/h5/ross-bg-home.png'),
     banner-approve-h5: