首页组件

epmet-oper-web/src/assets/scss/modules/wx-mini/more.scss → epmet-oper-web/src/assets/scss/modules/wx-mini/extended.scss

@@ -3,46 +3,36 @@
 @import "@/assets/scss/c/anime.scss";
 
 // 更多功能1
-.mw-cpt-cnt_menus {
+.extended_more1 {
-  position: relative;
   margin-top: 10px;
+  background: rgba(255, 255, 255, 1);
 
-  .d-cpt-wrap {
+  .more_list {
-    width: 355px;
+    padding:0 20px;
-    margin: 0 auto;
+    display: flex;
-    border-radius: 5px;
+    justify-content: space-between;
-    overflow: hidden;
-    background: rgba(255, 255, 255, 1);
 
-    .list {
+    .more_item {
-      padding: 15px 0 5px;
+      display: flex;
-      overflow: hidden;
+      flex-direction: column;
-      .item {
+      text-align: center;
-        position: relative;
-        float: left;
-        margin: 0 24px;
-        width: 40px;
-
-        > img {
-          display: block;
-          width: 40px;
-          height: 40px;
-          margin-bottom: 1px;
-        }
 
-        p {
+      img {
-          width: 100px;
+        width: 40px;
-          margin-left: -30px;
+        height: 40px;
-          line-height: 15px;
+        margin-bottom: 1px;
-          font-size: 13px;
-          text-align: center;
-          font-family: PingFang SC;
-          font-weight: 500;
-          color: rgba(51, 51, 51, 1);
-        }
       }
 
+      p {
+        line-height: 15px;
+        font-size: 13px;
+        text-align: center;
+        font-family: PingFang SC;
+        font-weight: 500;
+        color: rgba(51, 51, 51, 1);
+      }
     }
+
   }
 }
 

epmet-oper-web/src/assets/scss/modules/wx-mini/group.scss

@@ -13,7 +13,10 @@
   .list {
     width: 1000px;
     overflow: hidden;
-
+    padding:10px 10px;
+    .item_margin{
+      margin-left:10px;
+    }
     .item {
       width: 205px;
       height:122px;
@@ -21,10 +24,9 @@
       float: left;
       border-radius: 10px;
       background-color: #ffffff;
-      margin-left: 10px;
+      // margin-left: 10px;
-      box-shadow: 0px 3px 24px 0px rgba(211, 211, 211, 0.26);
+      box-shadow: 3px 3px 24px 3px rgba(211, 211, 211, 0.26);
     
-
       .row1{
         display:flex;
         margin:10px;

epmet-oper-web/src/assets/scss/modules/wx-mini/more copy.scss

@@ -1,270 +0,0 @@
-@import "@/assets/scss/c/config.scss";
-@import "@/assets/scss/c/function.scss";
-@import "@/assets/scss/c/anime.scss";
-
-
-// 我的消息
-.mw-cpt-new_msg {
-  position: relative;
-
-  .d-cpt-wrap {
-    width: 136px;
-    height: 50px;
-    background: rgba(255, 255, 255, 1);
-    box-shadow: 0px 2px 12px 0px rgba(211, 211, 211, 0.26);
-    border-radius: 50px 0 0 50px;
-    line-height: 50px;
-    img {
-      position: relative;
-      width: 40px;
-      margin: 5px;
-      vertical-align: top;
-    }
-    span {
-      font-size: 16px;
-      font-family: PingFang SC;
-      font-weight: 500;
-      color: rgba(255, 76, 82, 1);
-    }
-  }
-}
-
-// 更多功能1
-.mw-cpt-cnt_menus {
-  position: relative;
-  margin-top: 10px;
-
-  .d-cpt-wrap {
-    width: 355px;
-    margin: 0 auto;
-    border-radius: 5px;
-    overflow: hidden;
-    background: rgba(255, 255, 255, 1);
-
-    .list {
-      padding: 15px 0 5px;
-      overflow: hidden;
-      .item {
-        position: relative;
-        float: left;
-        margin: 0 24px;
-        width: 40px;
-
-        > img {
-          display: block;
-          width: 40px;
-          height: 40px;
-          margin-bottom: 1px;
-        }
-
-        p {
-          width: 100px;
-          margin-left: -30px;
-          line-height: 15px;
-          font-size: 13px;
-          text-align: center;
-          font-family: PingFang SC;
-          font-weight: 500;
-          color: rgba(51, 51, 51, 1);
-        }
-      }
-
-    }
-  }
-}
-
-// 更多功能2
-.mw-cpt-cnt_function2 {
-  position: relative;
-  margin-top: 10px;
-
-  .d-cpt-wrap {
-    border-radius: 10px;
-    // overflow-x: scroll;
-    overflow: hidden;
-    margin: 0 13px;
-    padding:0 0 13px 0;
-    background-color: white;
-
-    .link {
-      width: 100%;
-      position: relative;
-
-      .link-item{
-        display: inline;
-        position: relative;
-
-        > img {
-          width:45%;
-          // width: 308px;
-          margin: 8px;
-          // height: 160px;
-          border-radius: 10px;
-        }
-        span {
-          position: absolute;
-          top: -10px;
-          left: 20px;
-          color: #fff;
-          font-size: 15px;
-          font-family: PingFang SC;
-          font-weight: bold;
-          color: #ffffff;
-        }
-      }
-
-      
-    }
-    
-    .dots {
-      position: absolute;
-      bottom: 10px;
-      left: 0;
-      right: 0;
-      width: 100%;
-      display: flex;
-      justify-content: center;
-  
-      .dot {
-        margin: 0 5px;
-        width: 20px;
-        height: 4px;
-        border-radius: 6px;
-        background-color: #ddd;
-        transition: all ease $ad1;
-  
-        &.z-on {
-          background-color: $c1;
-        }
-      }
-    }
-
-  }
-}
-
-  // 积分银行积分排行
-.mw-cpt-score_rank {
-  position: relative;
-  margin-top: 10px;
-
-  .d-cpt-wrap {
-    width: 100%;
-    // overflow-x: scroll;
-    overflow: hidden;
-    .d-cpt-title {
-      position: relative;
-      margin: 10px 10px 0 10px;
-      padding: 7px 10px 13px;
-      font-size: 17px;
-      line-height: 15px;
-      font-family: PingFang SC;
-      font-weight: bold;
-      color: rgba(51, 51, 51, 1);
-      border-bottom: 1px solid #e7eeee;
-
-      &::before {
-        content: "";
-        position: absolute;
-        top: 7px;
-        left: 0;
-        width: 3px;
-        height: 15px;
-        background: rgba(230, 0, 0, 1);
-        border-radius: 3px;
-      }
-    }
-
-    .rank_title{
-      margin:10px 20px;
-      display: flex;
-      .rank_title_total{
-        margin-right:20px;
-        width:33%;
-        font-size: 15px;
-        text-align: center;
-        font-family: PingFang SC;
-        padding:3px 10px;
-        font-weight: 500;
-        background-color: rgba(239, 60, 61, 1);
-        color: rgb(255, 255, 255);
-        border-radius: 90px;
-      }
-      .rank_title_week{
-        width:33%;
-        margin-right:20px;
-        font-size: 15px;
-        text-align: center;
-        font-family: PingFang SC;
-        padding:3px 10px;
-        font-weight: 500;
-        background-color: rgb(255, 255, 255);
-        color: rgb(0, 0, 0);
-        border-radius: 90px;
-        border-color: rgb(139, 139, 139);
-        border-width: 1px;
-        border-style: solid;
-      }
-      .rank_title_month{
-        width:33%;
-        font-size: 15px;
-        text-align: center;
-        font-family: PingFang SC;
-        padding:3px 10px;
-        font-weight: 500;
-        background-color: rgb(255, 255, 255);
-        color: rgb(0, 0, 0);
-        border-radius: 90px;
-        border-color: rgb(139, 139, 139);
-        border-width: 1px;
-        border-style: solid;
-      }
-    }
-
-    .list {
-      margin:10px 15px;
-      .item {
-        margin:8px 0;
-        padding:8px 0;
-        background-color: #ffffff;
-        width: 100%;
-        display:flex;
-        height: 40px ; 
-        align-items:center;
-        .logo {
-          width:10%;
-          height: 21px;
-          line-height: 21px;
-          text-align: center;
-          >img{
-            width: 25px;
-          }
-          >span{
-            font-size: 14px;
-            text-align: center;
-          }
-        
-        }
-          .name {
-            width:70%;
-            z-index: 10;
-            vertical-align: bottom;
-          }
-          .score {
-            width:20%;
-            z-index: 20;
-            font-size: 14px;
-            font-family: PingFang SC;
-            font-weight: bold;
-            font-style: italic;
-          }
-        
-
-      }
-    }
-  }
-}
-
-
-		
-
-

epmet-oper-web/src/assets/scss/modules/wx-mini/score.scss

@@ -31,7 +31,7 @@
         background: rgba(230, 0, 0, 1);
         border-radius: 3px;
       }
-      .more{
+      .score_more{
         position: absolute;
         top:13px;
         right:10px;

epmet-oper-web/src/assets/scss/modules/wx-mini/voice.scss

@@ -147,7 +147,7 @@
 }
 
 .rank_tabs{
-  margin:0px 15px 0px;
+  margin:10px 15px 0px;
   display: flex;
   padding:0px 0px;
   justify-content: space-between;

epmet-oper-web/src/components/wx-index/cpt-item.vue

@@ -53,8 +53,8 @@
     <!-- 扩展功能：更多功能1、更多功能2 -->
     <div v-else-if="item.componentFrontId==='resi-functionList-extend-moreFunctionIcons'
       ||item.componentFrontId==='resi-functionList-extend-moreFunctionIcons2'">
-      <more :item=item
+      <extended :item=item
-            :isFocused=isFocused></more>
+                :isFocused=isFocused></extended>
     </div>
 
     <!-- 楼院小组：推荐小组 -->
@@ -104,7 +104,7 @@ import pageHeader from './pageHeader.vue'
 import heart from './heart'
 import voice from './voice'
 import issue from './issue'
-import more from './more'
+import extended from './extended'
 import score from './score'
 import group from './group'
 
@@ -118,7 +118,7 @@ export default {
     heart,
     voice,
     issue,
-    more,
+    extended,
     score,
     group,
   },

epmet-oper-web/src/components/wx-index/more.vue → epmet-oper-web/src/components/wx-index/extended.vue

@@ -5,28 +5,30 @@
        @click="focusCpt">
 
     <!-- 更多功能组件 -->
-    <div class="mw-cpt-cnt_menus"
+    <div class="extended_more1"
          v-if="item.componentFrontId==='resi-functionList-extend-moreFunctionIcons'">
-      <div class="d-cpt-wrap">
+
-        <div class="list">
+      <div class="more_list">
-          <div class="item"
+        <div class="more_item"
-               :key="subindex"
+             :key="subindex"
-               v-for="(subitem, subindex) in item.demoData.list">
+             v-for="(subitem, subindex) in item.demoData.list">
-            <img v-if="subitem.ico"
+
-                 :src="subitem.ico">
+          <div>
             <img v-if="subindex==0"
-                 src="@/assets/img/modules/wx-mini/index-set/page/menu-1.png">
+                 src="@/assets/img/modules/wx-mini/index-set/page/icon1.png">
-            <img v-if="subindex==1"
+            <img v-else-if="subindex==1"
-                 src="@/assets/img/modules/wx-mini/index-set/page/menu-2.png">
+                 src="@/assets/img/modules/wx-mini/index-set/page/icon2.png">
-            <img v-if="subindex==2"
+            <img v-else-if="subindex==2"
-                 src="@/assets/img/modules/wx-mini/index-set/page/menu-3.png">
+                 src="@/assets/img/modules/wx-mini/index-set/page/icon3.png">
             <img v-else
-                 src="@/assets/img/modules/wx-mini/index-set/page/menu-4.png">
+                 src="@/assets/img/modules/wx-mini/index-set/page/icon4.png">
-            <p>{{ subitem.text }}</p>
           </div>
+          <p>{{ subitem.text }}</p>
         </div>
       </div>
+
     </div>
+
     <!-- 更多功能2栏组件 -->
     <div class="mw-cpt-cnt_function2"
          v-else-if="item.componentFrontId==='resi-functionList-extend-moreFunctionIcons2'">
@@ -86,4 +88,4 @@ export default {
   }
 }
 </script>
-<style lang="scss" src="@/assets/scss/modules/wx-mini/more.scss"></style>
+<style lang="scss" src="@/assets/scss/modules/wx-mini/extended.scss"></style>

epmet-oper-web/src/components/wx-index/group.vue

@@ -8,12 +8,9 @@
     <div v-if="item.componentFrontId==='resi-functionList-group-recommendGroupSlider'"
          class="group">
       <div class="list">
-        <!-- <div class="item"
+        <div :class="['item',{'item_margin':subindex>0}]"
              :key="subindex"
-             v-for="(subitem, subindex) in item.demoData.list"> -->
+             v-for="(subitem, subindex) in item.demoData.list">
-        <div class="item"
-             :key="subindex"
-             v-for="(subitem, subindex) in list">
 
           <div class="row1">
             <div class="left">

epmet-oper-web/src/components/wx-index/score.vue

@@ -9,7 +9,7 @@
          v-if="item.componentFrontId==='resi-functionList-score-rank'">
       <div class="score_rank_content">
         <div class="title">积分排名
-          <div class="more">查看更多</div>
+          <div class="score_more">查看更多</div>
         </div>
 
         <div class="rank_tabs">
@@ -74,7 +74,7 @@
          v-if="item.componentFrontId==='resi-functionList-score-rank-2'">
       <div class="score_rank_content">
         <div class="title">积分排名
-          <div class="more">查看更多</div>
+          <div class="score_more">查看更多</div>
         </div>
 
         <div class="single">

epmet-oper-web/src/components/wx-index/voice.vue

@@ -135,4 +135,4 @@ export default {
   }
 }
 </script>
-<style lang="scss" src="@/assets/scss/modules/wx-mini/voice.scss"></style>
+<style lang="scss" src="@/assets/scss/modules/wx-mini/voice.scss" ></style>

epmet-oper-web/src/views/modules/customer/customize/MiniHome.vue

@@ -810,7 +810,7 @@ export default {
     addCpt (item, tempOnlyId, displayOrder = 0) {
       console.log('添加组件到实例')
       let trueItem = cloneDeep(item)
-      debugger
+
       trueItem.tempOnlyId = tempOnlyId
       trueItem.displayOrder = displayOrder
       this.cptList.push(trueItem)

epmet-oper-web/src/views/modules/wx-mini/index-set.vue

@@ -767,7 +767,7 @@ export default {
     },
     // 添加组件到实例-前验证
     beforeAddCpt (item) {
-      debugger
+
       console.log('添加组件到实例-前验证')
       const regionType = this.checkCptRegion(item)
       const tempOnlyId = getRandomString(20)