添加：品牌好店 - 风格三样式

src/components/mobilePage/home_shop.vue

@@ -1,19 +1,11 @@
 <template>
   <div :style="{marginTop:slider+'px'}">
-        <div class="page-shop" :style="{marginLeft:prConfig+'px',marginRight:prConfig+'px',background:bgColor}" :class="bgStyle?'':'shopOn'">
+    <div class="page-shop" :style="{paddingLeft:prConfig+'px',paddingRight:prConfig+'px',background:bgColor}" :class="bgStyle?'':'shopOn'">
       <div v-if="titleUrl" class="title-count">
         <img :src="titleUrl">
       </div>
-            <!--多行展示-->
+      <!-- 风格一 -->
-            <div class="mobile-page" v-if="isOne">
+      <div class="mobile-page" v-if="isOne == 0">
-                <div class="shop-list">
-                    <div v-for="(item, index) in shopList" class="list" :key="index">
-                        <img src="@/assets/images/store_avatar.png">
-                    </div>
-                </div>
-            </div>
-            <!--单行展示-->
-            <div class="mobile-page" v-else>
         <div class="home-shop" v-for="(item, index) in shopList" :key="index">
           <div class="shop-info" :style="{background:bgColor.item}" :class="bgStyle?'':'shopOn'">
             <img class="bgImg" src="@/assets/images/store_bg.png" :class="bgStyle?'':'shopOn'">
@@ -35,6 +27,85 @@
           </div>
         </div>
       </div>
+      <!-- 风格二 -->
+      <div class="mobile-page" v-if="isOne == 1">
+        <div class="shop-list">
+          <div v-for="(item, index) in shopList" class="list" :key="index">
+            <img src="@/assets/images/store_avatar.png">
+          </div>
+        </div>
+      </div>
+      <!-- 风格三 -->
+      <div class="mobile-page mobile-page-style-3" v-if="isOne == 2">
+        <div
+          class="home-shop shop-block"
+          v-for="(item, index) in shopList" :key="index"
+          :style="{borderRadius:(bgStyle == 1 ? '8px' : '')}"
+        >
+          <div class="shop-block-top">
+            <div class="image">
+              <img class="store-avatar" src="@/assets/images/store_avatar.png">
+              <div class="store-type">品牌店铺</div>
+            </div>
+            <div class="store-desc">
+              <div class="store-name">
+                <div class="store-title">小米商城</div>
+                <div class="store-name-label">优选</div>
+              </div>
+              <div class="statistics">
+                <div class="stars">
+                  <i class="active-i el-icon-star-on"></i>
+                  <i class="active-i el-icon-star-on"></i>
+                  <i class="active-i el-icon-star-on"></i>
+                  <i class="el-icon-star-on"></i>
+                  <i class="el-icon-star-on"></i>
+                </div>
+                <div class="per-avg">人均 258 元</div>
+                <div class="month-sale">月售 300+</div>
+              </div>
+              <div class="class-address">
+                <div class="store-class">美妆护理</div>
+                <div class="store-address">人民北路39号</div>
+                <div class="store-distance">983m</div>
+              </div>
+              <div class="other-label-list">
+                <div class="other-label-item">服务超给力</div>
+                <div class="other-label-item">青羊区美容排行榜第一名</div>
+              </div>
+            </div>
+          </div>
+          <div class="goods-list">
+            <div class="goods-block">
+              <div class="left-label">
+                <div class="left-label-tag">套餐</div>
+              </div>
+              <div class="goods-info-left">
+                <i class="el-icon-s-goods" />
+                <div class="price">¥198</div>
+                <div class="line-price">¥680</div>
+              </div>
+              <div class="goods-info-right">
+                <div class="goods-name">爆品推荐美容护肤单品优先抢购先到先得</div>
+                <i class="el-icon-arrow-right" />
+              </div>
+            </div>
+            <div class="goods-block">
+              <div class="left-label">
+                <div class="left-label-tag">优惠促销</div>
+              </div>
+              <div class="goods-info-left">
+                <i class="el-icon-s-goods" />
+                <div class="price">¥198</div>
+                <div class="line-price">¥680</div>
+              </div>
+              <div class="goods-info-right">
+                <div class="goods-name">爆品推荐美容护肤单品优先抢购先到先得</div>
+                <i class="el-icon-arrow-right" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
       <div class="shop-more">更多店铺<span class="iconfont iconjinru"></span></div>
     </div>
   </div>
@@ -108,12 +179,16 @@ export default {
                     type: 1,
                     tabList: [
                         {
-                            name: '单行模式',
+                            name: '风格一',
                             icon: 'icondanhang'
                         },
                         {
-                            name: '多行模式',
+                            name: '风格二',
                             icon: 'iconduohang'
+                        },
+                        {
+                          name: '风格三',
+                          icon: 'icondanhang'
                         }
                     ]
                 },
@@ -444,7 +519,6 @@ export default {
         margin-left: 3px;
     }
 }
-
 .title-count{
     text-align: center;
     padding: 10px 0;
@@ -454,4 +528,303 @@ export default {
         // height: 80px;
     }
 }
+.mobile-page-style-3{
+  --store-avatar-size-: 100px;
+
+  .shop-block{
+    --shop-block-background-: #ffffff;
+    padding: 10px;
+    background: var(--shop-block-background-);
+
+    .shop-block-top{
+      width: 100%;
+      height: var(--store-avatar-size-);
+      display: inline-flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      justify-content: flex-start;
+      align-items: center;
+
+      .image{
+        height: var(--store-avatar-size-);
+        width: var(--store-avatar-size-);
+        position: relative;
+        border-radius: 5px;
+        overflow: hidden;
+        .store-avatar{
+          width: 100% !important;
+          height: 100% !important;
+        }
+        .store-type{
+          position: absolute;
+          top: 0;
+          left: 0;
+          height: 18px;
+          line-height: 18px;
+          padding: 0 5px;
+          font-size: 12px;
+          background: #f5dda9;
+          color: #000000;
+          border-radius: 3px;
+        }
+      }
+      .store-desc{
+        padding-left: 10px;
+        width: calc(100% - var(--store-avatar-size-));
+        display: inline-flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        justify-content: center;
+        align-items: flex-start;
+
+        .store-name{
+          width: 100%;
+          display: inline-flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          align-items: center;
+          justify-content: flex-start;
+          height: 25px;
+          line-height: 25px;
+
+          .store-title{
+            font-size: 15px;
+            font-weight: bold;
+            max-width: calc(100% - 40px);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+          .store-name-label{
+            height: 17px;
+            line-height: 18px;
+            font-size: 12px;
+            background: black;
+            color: #93674b;
+            border-radius: 3px;
+            width: 35px;
+            text-align: center;
+            margin-left: 5px;
+          }
+        }
+        .statistics{
+          --stars-width-: 80px;
+          --month-sale-width-: 65px;
+          --stars-size-: calc((var(--stars-width-) - 5px) / 5);
+
+          display: inline-flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          justify-content: space-between;
+          align-items: center;
+          width: 100%;
+          height: 25px;
+          font-size: 12px;
+
+          .stars{
+            width: var(--stars-width-);
+
+            i{
+              height: var(--stars-size-) !important;
+              line-height: var(--stars-size-) !important;;
+              width: var(--stars-size-) !important;
+              background: #cccccc;
+              color: #FFFFFF;
+              float: left;
+              text-align: center;
+              border-radius: 1px;
+            }
+            i:not(:last-child){
+              margin-right: 1px;
+            }
+            .active-i{
+              background: #f65906!important;
+            }
+          }
+          .per-avg{
+            width: calc(100% - (var(--stars-width-) + var(--month-sale-width-)));
+            padding-left: 5px;
+            height: 15px;
+            line-height: 16px;
+            color: #919191;
+          }
+          .month-sale{
+            text-align: right;
+            width: var(--month-sale-width-);
+            height: 15px;
+            line-height: 16px;
+            color: #919191;
+          }
+        }
+        .class-address{
+          height: 25px;
+          width: 100%;
+          display: inline-flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          justify-content: space-between;
+          align-items: center;
+          font-size: 14px;
+          color: #7a7a7a;
+          .store-class{
+            width: 65px;
+            white-space: nowrap;
+            overflow: hidden;
+            margin-right: 5px;
+          }
+          .store-address{
+            width: calc(100% - 65px - 60px);
+            white-space: nowrap;
+            overflow: hidden;
+          }
+          .store-distance{
+            color: #3a3a3a;
+            width: 60px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-align: right;
+          }
+        }
+        .other-label-list{
+          height: 25px;
+          width: 100%;
+          display: inline-flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          align-items: center;
+          justify-content: flex-start;
+          white-space: nowrap;
+          overflow: hidden;
+          .other-label-item{
+            height: 18px;
+            line-height: 18px;
+            padding: 0 5px;
+            background: #fcf0e6;
+            color: #f19d75;
+            border-radius: 3px;
+            font-size: 12px;
+          }
+          .other-label-item:not(:last-child){
+            margin-right: 5px;
+          }
+        }
+      }
+    }
+
+    .goods-list{
+      width: 100%;
+      display: inline-flex;
+      flex-direction: column;
+      flex-wrap: nowrap;
+      align-items: flex-start;
+      justify-content: flex-start;
+      .goods-block{
+        width: 100%;
+        display: inline-flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: center;
+        justify-content: flex-start;
+        height: 30px;
+        .left-label{
+          --left-label-tag-border-color-: #f8ddd4;
+
+          width: var(--store-avatar-size-);
+          height: 100%;
+          display: inline-flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          justify-content: flex-end;
+          align-items: center;
+          padding-right: 10px;
+
+          .left-label-tag{
+            border: 1px solid var(--left-label-tag-border-color-);
+            padding: 0 5px 0 10px;
+            height: 22px;
+            line-height: 22px;
+            font-size: 12px;
+            color: #e75a29;
+            position: relative;
+          }
+          .left-label-tag:after, .left-label-tag:before {
+            border: solid transparent;
+            content: ' ';
+            height: 0;
+            left: 100%;
+            position: absolute;
+            top: -2px;
+            width: 0;
+          }
+          .left-label-tag:after {
+            border-width: 10px;
+            border-left-color: var(--shop-block-background-);
+            top: 0;
+          }
+          .left-label-tag:before {
+            border-width: 12px;
+            border-left-color: var(--left-label-tag-border-color-);
+          }
+        }
+        .goods-info-left{
+          width: calc((100% - var(--store-avatar-size-)) * 0.4);
+          height: 100%;
+          padding-left: 10px;
+          display: inline-flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          justify-content: flex-start;
+          align-items: center;
+
+          .el-icon-s-goods{
+            height: 18px;
+            width: 18px;
+            background: linear-gradient(179deg, #fd931e, #ec6b00);
+            display: inline-flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            justify-content: center;
+            align-items: center;
+            margin-right: 5px;
+            color: #FFFFFF;
+          }
+          .price{
+            color: #e33a25;
+            font-size: 12px;
+            margin-right: 5px;
+          }
+          .line-price{
+            color: #767676;
+            font-size: 12px;
+            text-decoration: line-through;
+          }
+        }
+        .goods-info-right{
+          width: calc((100% - var(--store-avatar-size-)) * 0.6);
+          height: 100%;
+          display: inline-flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          justify-content: flex-start;
+          align-items: center;
+          .goods-name{
+            width: calc(100% - 15px);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            padding-left: 10px;
+            font-size: 12px;
+          }
+          .el-icon-arrow-right{
+            height: 30px;
+            line-height: 30px;
+            width: 15px;
+            text-align: center;
+            font-size: 15px;
+          }
+        }
+      }
+    }
+  }
+}
 </style>