添加：品牌好店 - 风格三样式
This commit is contained in:
parent
4be8162cb6
commit
404507039d
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 76 KiB |
|
|
@ -1,25 +1,17 @@
|
|||
<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="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="mobile-page" v-if="isOne == 0">
|
||||
<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'">
|
||||
<div class="shop-title">
|
||||
<img src="@/assets/images/store_avatar.png">
|
||||
<div class="shop-name">{{item.name}}</div>
|
||||
<div class="shop-name">{{ item.name }}</div>
|
||||
<div class="store-type" :style="{background:themeColor}">自营</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -28,8 +20,87 @@
|
|||
<img v-if="itm.image" :src="item.image">
|
||||
<div class="empty-box"><span class="iconfont-diy icontupian"></span></div>
|
||||
<div class="info">
|
||||
<div v-if="titleShow" class="name line1">{{itm.store_name}}</div>
|
||||
<div v-if="priceShow" class="price" :style="{color:themeColor}">¥ <span>{{itm.price}}</span></div>
|
||||
<div v-if="titleShow" class="name line1">{{ itm.store_name }}</div>
|
||||
<div v-if="priceShow" class="price" :style="{color:themeColor}">¥ <span>{{ itm.price }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue