ui调整

src/views/Home.vue

@@ -24,6 +24,7 @@
               :item="tryItem"
               @feature="tab = 1; width = '80%'"
               @retake="tab = 0; width = CLIENT_WIDTH + 'px'"
+              @error="handleError"
             ></MTry>
           </template>
         </template>

src/views/components/MFeature.vue

@@ -57,7 +57,7 @@ export default {
           this.$emit('error', '当前脸型没有适配镜框')
           return
         }
-        this.$emit('click:try', { ...item, items: data })
+        this.$emit('click:try', { ...item, items: [...data, ...data, ...data] })
       } catch (error) {
         this.$emit('error', error.message)
       }

src/views/components/MTry.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex flex-column align-center" style="height: 100%;">
+  <v-card class="d-flex flex-column align-center" style="height: 100%;">
 
     <div class="d-flex black align-center justify-center" style="height: 100%; position: relative; overflow: hidden;">
       <div class="contentBox">
@@ -38,19 +38,23 @@
       </div>
       <v-card
         v-if="!clear"
-        class="contentBox-desc"
-        color="#385F73"
+        class="contentBox-desc rounded-lg"
+        :class="{hide: hidePanel}"
+        :elevation="!hidePanel * 15"
         dark
         width="300"
         height="200"
       >
+        <div class="arrows d-flex align-center justify-center cursor-pointer" @click="hidePanel = !hidePanel">
+          <v-icon :size="hidePanel ? 24 : 36">{{ hidePanel ? 'mdi-card-bulleted' : 'mdi-chevron-left'}}</v-icon>
+        </div>
         <v-card-title class="text-h5">
           {{ chooseItem.frametype }}
         </v-card-title>
 
         <v-card-subtitle>{{ chooseItem.detail_info }}</v-card-subtitle>
         <v-card-text>
-          <p>脸型： {{ faceType }}</p>
+          <p>脸型： {{ chooseItem.faceType }}</p>
           <p>品牌： {{ chooseItem.brand }}</p>
           <p>材质： {{ chooseItem.material }}</p>
         </v-card-text>
@@ -68,7 +72,16 @@
         </swiper>
       </div>
     </div>
-  </div>
+    <v-overlay :value="loading" opacity="0.5">
+      <v-progress-linear
+        color="white"
+        indeterminate
+        rounded
+        height="10"
+        style="width: 200px;"
+      ></v-progress-linear>
+    </v-overlay>
+  </v-card>
 </template>
 <script>
 // import { debounce } from 'lodash'
@@ -94,6 +107,8 @@ export default {
   },
   data () {
     return {
+      hidePanel: false,
+      loading: false,
       isMobile: isMobile(),
       scale: 1,
       clear: false,
@@ -122,11 +137,13 @@ export default {
   },
   inject: ['size'],
   computed: {
-    faceType () {
-      return programType.find(e => e.value === this.chooseItem.facetype)?.face ?? ''
-    },
+    // faceType () {
+    //   return programType.find(e => e.value === this.chooseItem.facetype)?.face ?? ''
+    // },
     chooseItem () {
-      return this.item.items[this.active] ?? {}
+      const obj = this.item.items[this.active] ?? {}
+      obj.faceType = programType.find(e => e.value === obj.facetype)?.face ?? ''
+      return obj
     },
     tryGlassesSize () {
       const x1 = this.item.facial_points.cheek_left_3.x
@@ -206,16 +223,16 @@ export default {
   },
   methods: {
     onPlus () {
-      if (this.scale > 1.6) {
+      if (this.scale > 1.4) {
         return
       }
-      this.scale += 0.2
+      this.scale += 0.05
     },
     onMinus () {
-      if (this.scale < 0.4) {
+      if (this.scale < 0.6) {
         return
       }
-      this.scale -= 0.2
+      this.scale -= 0.05
     },
     // 清屏
     onClear () {
@@ -248,7 +265,16 @@ export default {
       return degrees
     },
     onSlideChange () {
+      this.loading = true
       this.active = this.$refs.mySwiper.swiper.activeIndex
+      const timer = setTimeout(() => {
+        this.loading = false
+        this.$emit('error', '加载失败')
+      }, 3000)
+      this.$nextTick(() => {
+        this.loading = false
+        clearTimeout(timer)
+      })
     },
     onTouchMove (v) {
       if (!this.canMove) {
@@ -324,6 +350,7 @@ export default {
   width: 100%;
 
   .swiper-slide {
+    border-radius: 30px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -335,10 +362,15 @@ export default {
     background-position: center;
     background-size: cover;
     color: #FFF;
-    box-shadow: 0px 0px 8px 4px #888888;
+    // box-shadow: 0px 0px 8px 4px #888888;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    background-color: rgba(255, 255, 255, 0.15);
+    backdrop-filter: blur(5px);
     translate: .5s;
     &.active {
-      background: #FFF;
+      background-color: rgba(255, 255, 255, 1);
+      backdrop-filter: blur(20px);
+      // box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
       // width: 250px;
       // height: 200px;
     }
@@ -376,9 +408,35 @@ export default {
 .contentBox {
   position: relative;
   &-desc {
+    background-color: rgba(69, 69, 69, .5);
+    backdrop-filter: blur(10px);
     position: absolute;
     left: 0;
     top: 0;
+    $height: 100px;
+    $width: 50px;
+    .arrows {
+      width: $width;
+      height: $height;
+      position: absolute;
+      top: 50%;
+      right: 0;
+      margin-top: $height / -2;
+      border-radius: 100px 0 0 100px !important;
+      box-shadow: inset 5px 0 10px 0px rgba(0, 0, 0, .75);
+    }
+    &.hide {
+      transform: translate(-100%, 0);
+      // translate: 3s;
+      .arrows {
+        height: $height / 2;
+        right: -$width;
+        border-radius: 0 100px 100px 0 !important;
+        box-shadow: 2px 0px 5px 0px rgb(247 247 247);
+        background-color: rgba(0, 0, 0, .75);
+        backdrop-filter: blur(20px);
+      }
+    }
   }
   &-tool {
     width: 50px;