mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-08-06 19:07:25 +08:00
feat: ✨ 新增楼层装修 更改部分买家端UI
This commit is contained in:
Yer
@@ -81,6 +81,27 @@
|
||||
<template v-if="element.type == 'recommend'">
|
||||
<recommend :data="element" class="mb_20 width_1200_auto"></recommend>
|
||||
</template>
|
||||
|
||||
<!-- 一行三列 -->
|
||||
<template v-if="element.type == 'oneRowThreeColumns'">
|
||||
<oneRowThreeColumns :data="element" class="mb_20 width_1200_auto"></oneRowThreeColumns>
|
||||
</template>
|
||||
<!-- 商品模块 -->
|
||||
<template v-if="element.type == 'goodsType'">
|
||||
<goodsAndType :paramData="element" class="mb_20 width_1200_auto"></goodsAndType>
|
||||
</template>
|
||||
<!-- 商品模块 -->
|
||||
<template v-if="element.type == 'onlyGoodsModel'">
|
||||
<onlyGoodsModel :data="element" class="mb_20 width_1200_auto"></onlyGoodsModel>
|
||||
</template>
|
||||
<!-- 混合模块 -->
|
||||
<template v-if="element.type == 'mixModel'">
|
||||
<mixModel :data="element" class="mb_20 width_1200_auto"></mixModel>
|
||||
</template>
|
||||
<!-- 混合模块 -->
|
||||
<template v-if="element.type == 'forYour'">
|
||||
<forYour :data="element" class="mb_20 width_1200_auto"></forYour>
|
||||
</template>
|
||||
<!-- 新品排行 -->
|
||||
<template v-if="element.type == 'newGoodsSort'">
|
||||
<new-goods-sort
|
||||
@@ -100,7 +121,7 @@
|
||||
<div style="width: 100%; text-align: center">
|
||||
<img
|
||||
width="1200"
|
||||
class="hover-pointer mb_20"
|
||||
class="hover-pointer mb_20 bannerAd"
|
||||
@click="linkTo(element.options.url)"
|
||||
:src="element.options.img"
|
||||
alt=""
|
||||
@@ -126,6 +147,12 @@ import NewGoodsSort from "./modelList/NewGoodsSort.vue";
|
||||
import Recommend from "./modelList/Recommend.vue";
|
||||
import NotEnough from "./modelList/NotEnough.vue";
|
||||
import Seckill from "./modelList/Seckill.vue";
|
||||
import oneRowThreeColumns from "./modelList/oneRowThreeColumns.vue";
|
||||
import goodsAndType from "./modelList/goodsAndType.vue";
|
||||
import onlyGoodsModel from "./modelList/onlyGoodsModel.vue";
|
||||
import mixModel from "./modelList/mixModel.vue";
|
||||
import forYour from "./modelList/forYour.vue";
|
||||
|
||||
|
||||
export default {
|
||||
name: "modelFormItem",
|
||||
@@ -139,6 +166,11 @@ export default {
|
||||
FirstPageAdvert,
|
||||
NotEnough,
|
||||
Seckill,
|
||||
oneRowThreeColumns,
|
||||
goodsAndType,
|
||||
onlyGoodsModel,
|
||||
mixModel,
|
||||
forYour
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -153,7 +185,11 @@ export default {
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.bannerAd{
|
||||
width: 1183px;
|
||||
height: 166.6px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
/** 热门广告 */
|
||||
.advert-list {
|
||||
background: $theme_color;
|
||||
@@ -198,9 +234,4 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.width_1200_auto {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,14 +5,13 @@
|
||||
<div class="nav-side"></div>
|
||||
<div class="nav-content">
|
||||
<!-- 轮播图 -->
|
||||
<Carousel autoplay>
|
||||
<!-- autoplay autoplay-speed="10000"-->
|
||||
<Carousel :height="333.9" >
|
||||
<CarouselItem v-for="(item, index) in data.options.list" :key="index">
|
||||
<div style="overflow: hidden">
|
||||
<div class="swiper-img" >
|
||||
<img
|
||||
:src="item.img"
|
||||
width="790"
|
||||
@click="linkTo(item.url)"
|
||||
height="340"
|
||||
class="hover-pointer"
|
||||
/>
|
||||
</div>
|
||||
@@ -20,48 +19,65 @@
|
||||
</Carousel>
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<div class="person-msg">
|
||||
<img :src="userInfo.face" v-if="userInfo.face" alt />
|
||||
<Avatar icon="ios-person" class="mb_10" v-else size="80" />
|
||||
<div>
|
||||
<div class="person-msg" @click="entryControl({ path: 'home' })">
|
||||
<img class="user-face" :src="userInfo.face || defaultAvatar" alt />
|
||||
<div class="welcome">
|
||||
Hi, {{
|
||||
userInfo.nickName || `欢迎来到${config.title}` | secrecyMobile
|
||||
}}
|
||||
</div>
|
||||
<div v-if="userInfo.id">
|
||||
<Button class="btns" shape="circle" @click="$router.push('home')"
|
||||
>会员中心</Button
|
||||
<div class="icon-list"></div>
|
||||
<!-- #TODO 后续增加 -->
|
||||
<!-- <div class="icon-list flex flex-j-sb" >
|
||||
<div class="icon-item" :key="index" @click="entryControl(item)" v-for="(item,index) in recentList">
|
||||
<div class="value">
|
||||
{{ item.value}}
|
||||
</div>
|
||||
<div class="label">
|
||||
{{ item.label}}
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div v-else class="flex flex-a-c ">
|
||||
<div class="btns" @click="$router.push('login')" shape="circle"
|
||||
>登录</div
|
||||
>
|
||||
<div class="btns sign-up" @click="$router.push('signUp')" shape="circle"
|
||||
>注册</div
|
||||
>
|
||||
</div>
|
||||
<div v-else>
|
||||
<Button class="btns" @click="$router.push('login')" shape="circle"
|
||||
>请登录</Button
|
||||
>
|
||||
|
||||
<div class="gray-line"></div>
|
||||
<div class="icon-list flex flex-j-sb" >
|
||||
<div class="icon-item" @click="entryControl(item)" :key="index" v-for="(item, index) in entranceList">
|
||||
<img class="icon" :src="require(`@/assets/iconfont/${item.icon}.png`)">
|
||||
<div>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shop-msg">
|
||||
<div>
|
||||
<span>常见问题</span>
|
||||
<ul class="article-list">
|
||||
<li
|
||||
class="ellipsis"
|
||||
:alt="article.title"
|
||||
v-for="(article, index) in articleList"
|
||||
:key="index"
|
||||
@click="goArticle(article.id)"
|
||||
>
|
||||
{{ article.title }}
|
||||
</li>
|
||||
</ul>
|
||||
<div class="icon-list flex flex-j-sb" >
|
||||
<div class="icon-item" :key="index" @click="entryControl(item)" v-for="(item, index) in appendList">
|
||||
<img class="icon" :src="require(`@/assets/iconfont/${item.icon}.png`)">
|
||||
<div>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { articleList } from "@/api/common.js";
|
||||
|
||||
import storage from "@/plugins/storage";
|
||||
export default {
|
||||
name: "modelCarousel",
|
||||
@@ -69,60 +85,251 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
config: require("@/config"),
|
||||
defaultAvatar: require("@/assets/images/default.png"),
|
||||
userInfo: {}, // 用户信息
|
||||
articleList: [], // 常见问题
|
||||
params: {
|
||||
// 请求常见问题参数
|
||||
pageNumber: 1,
|
||||
pageSize: 5,
|
||||
type: "ANNOUNCEMENT",
|
||||
sort: "sort",
|
||||
},
|
||||
entranceList: [
|
||||
{
|
||||
icon: "collage",
|
||||
label: "宝贝收藏",
|
||||
path: "/home/Favorites"
|
||||
},
|
||||
{
|
||||
icon: "shop",
|
||||
label: "收藏店铺",
|
||||
path: "/home/Favorites?type=STORE"
|
||||
},
|
||||
{
|
||||
icon: "carts",
|
||||
label: "购物车",
|
||||
path: "/cart"
|
||||
},
|
||||
{
|
||||
icon: "story",
|
||||
label: "我的足迹",
|
||||
path: "/home/MyTracks"
|
||||
},
|
||||
],
|
||||
appendList: [
|
||||
{
|
||||
icon: "support",
|
||||
label: "帮助中心",
|
||||
path: "/article"
|
||||
},
|
||||
{
|
||||
icon: "feedback",
|
||||
label: "我的评论",
|
||||
path: "/home/CommentList"
|
||||
},
|
||||
{
|
||||
icon: "notice",
|
||||
label: "收货地址",
|
||||
path: "/home/MyAddress"
|
||||
},
|
||||
{
|
||||
icon: "notification",
|
||||
label: "我的消息",
|
||||
path: "/home/MsgList"
|
||||
},
|
||||
],
|
||||
recentList: [
|
||||
{
|
||||
value: "0",
|
||||
label: "购物车"
|
||||
},
|
||||
{
|
||||
value: "0",
|
||||
label: "待收货"
|
||||
},
|
||||
{
|
||||
value: "0",
|
||||
label: "待发货"
|
||||
},
|
||||
{
|
||||
value: "0",
|
||||
label: "代付款"
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getArticleList() {
|
||||
// 获取常见问题列表
|
||||
articleList(this.params).then((res) => {
|
||||
if (res.success) {
|
||||
this.articleList = res.result.records;
|
||||
}
|
||||
});
|
||||
},
|
||||
goArticle(id) {
|
||||
// 跳转文章详情
|
||||
let routeUrl = this.$router.resolve({
|
||||
path: "/article",
|
||||
query: { id },
|
||||
});
|
||||
window.open(routeUrl.href, "_blank");
|
||||
// 快捷跳转中心
|
||||
entryControl(val) {
|
||||
this.$router.push(val.path)
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (storage.getItem("userInfo"))
|
||||
this.userInfo = JSON.parse(storage.getItem("userInfo"));
|
||||
this.getArticleList();
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.label {
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
line-height: 14px;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.swiper-img {
|
||||
overflow: hidden;
|
||||
width: 637px;
|
||||
height: 329.9px;
|
||||
}
|
||||
|
||||
.icon-list {
|
||||
width: 216px
|
||||
}
|
||||
|
||||
.icon-list:nth-last-of-type(1) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.hot-box {
|
||||
margin-top: 35px;
|
||||
width: 216px;
|
||||
|
||||
}
|
||||
|
||||
.hot-tag {
|
||||
margin-right: 6px;
|
||||
width: 36px;
|
||||
height: 18px;
|
||||
border-radius: 4px;
|
||||
opacity: 1;
|
||||
font-size: 12px;
|
||||
border: 1px solid $theme_color;
|
||||
color: $theme_color;
|
||||
text-align: center;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.gray-line {
|
||||
width: 216px;
|
||||
height: 1px;
|
||||
border: 1px solid #E5E5E5;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
|
||||
>div {
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
line-height: 13px;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
>.value {
|
||||
font-size: 14px;
|
||||
|
||||
line-height: 17px;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0px;
|
||||
margin-bottom: 3px;
|
||||
color: $theme_color;
|
||||
}
|
||||
|
||||
>.label {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
|
||||
line-height: 14px;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
color: #666666;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.model-carousel {
|
||||
width: 1200px;
|
||||
height: 340px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hover-pointer {
|
||||
//display: block;
|
||||
//width: 100%;
|
||||
//height: 100%;
|
||||
width: 637px;
|
||||
height: 329.9px;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.welcome {
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 17px;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.hr {
|
||||
width: 216px;
|
||||
height: 1px;
|
||||
border: 1px solid #E5E5E5;
|
||||
}
|
||||
|
||||
.btns {
|
||||
background-color:#363634 ;
|
||||
line-height:30px;
|
||||
color: white !important;
|
||||
margin-top: 21px;
|
||||
margin-bottom: 13px;
|
||||
width: 77px;
|
||||
height: 28px;
|
||||
border-radius: 14px;
|
||||
opacity: 1;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
letter-spacing: 0px;
|
||||
|
||||
color: #FFFFFF;
|
||||
background: $theme_color;
|
||||
}
|
||||
.btns:hover {
|
||||
background-color: #363634;
|
||||
line-height:32px !important;
|
||||
color: #e5d790 !important;
|
||||
|
||||
.sign-up {
|
||||
background: #F39519;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
|
||||
.user-face {
|
||||
|
||||
margin-bottom: 12px;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 50%;
|
||||
|
||||
}
|
||||
|
||||
/* 导航主体 */
|
||||
.nav-body {
|
||||
width: 1200px;
|
||||
@@ -131,67 +338,78 @@ export default {
|
||||
}
|
||||
|
||||
.nav-side {
|
||||
height: 100%;
|
||||
width: 200px;
|
||||
height: 334px;
|
||||
width: 263.2px;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
float: left;
|
||||
padding: 0px;
|
||||
color: #fff;
|
||||
background-color: #6e6568;
|
||||
// background-color: #6e6568;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*导航内容*/
|
||||
.nav-content {
|
||||
width: 790px;
|
||||
overflow: hidden;
|
||||
width: 637px;
|
||||
margin-left: 10.8px;
|
||||
|
||||
margin-top: 10px;
|
||||
height: 333.9px;
|
||||
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
float: left;
|
||||
width: 210px;
|
||||
margin-top: 10px;
|
||||
width: 263.2px;
|
||||
margin-left: 10px;
|
||||
|
||||
border-radius: 10px;
|
||||
background: #FFFFFF;
|
||||
|
||||
.person-msg {
|
||||
cursor: pointer;
|
||||
height: 333px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin: 20px auto;
|
||||
button {
|
||||
height: 30px !important;
|
||||
margin-top: 10px;
|
||||
line-height: 30px;
|
||||
border: none;
|
||||
}
|
||||
.ivu-btn-default {
|
||||
// color: $theme_color;
|
||||
// border-color: $theme_color;
|
||||
}
|
||||
img {
|
||||
margin-bottom: 10px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
padding-top: 28px;
|
||||
padding-bottom: 25px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.shop-msg {
|
||||
div {
|
||||
width: 100%;
|
||||
margin: 10px 27px;
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
span:nth-child(1) {
|
||||
@include content_color($theme_color);
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
span:nth-child(3):hover {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
li {
|
||||
cursor: pointer;
|
||||
@@ -199,6 +417,7 @@ export default {
|
||||
color: #999395;
|
||||
width: 150px;
|
||||
font-size: 12px;
|
||||
|
||||
&:hover {
|
||||
color: $theme_color;
|
||||
}
|
||||
|
||||
@@ -65,12 +65,12 @@ export default {
|
||||
handleScrollx(){
|
||||
// console.log('滚动高度',window.pageYOffset) // 获取滚动条的高度
|
||||
// console.log(this.$refs.obtain.getBoundingClientRect().top) //获取到距离顶部的距离
|
||||
this.scrollHieght = Number(window.pageYOffset);//获取到距离顶部的距离
|
||||
this.scrollTops = Number(this.$refs.obtain.getBoundingClientRect().top); // 获取到距离顶部的距离
|
||||
this.topSearchShow = true; // 展示图钉
|
||||
if(this.scrollTops < -660){ // 超过隐藏
|
||||
this.topSearchShow = false;
|
||||
}
|
||||
// this.scrollHieght = Number(window.pageYOffset);//获取到距离顶部的距离
|
||||
// this.scrollTops = Number(this.$refs.obtain.getBoundingClientRect().top); // 获取到距离顶部的距离
|
||||
// this.topSearchShow = true; // 展示图钉
|
||||
// if(this.scrollTops < -660){ // 超过隐藏
|
||||
// this.topSearchShow = false;
|
||||
// }
|
||||
},
|
||||
toguid(path,id){
|
||||
var path =path;
|
||||
@@ -81,7 +81,7 @@ export default {
|
||||
change(status){ //获取是否获取到图钉
|
||||
this.open = status
|
||||
},
|
||||
gotoDemo(){ // 跳转到demo的位置
|
||||
gotoDemo(){ // 跳转到demo的位置
|
||||
if(this.open){ // 获取到图钉之后在跳转当前位置
|
||||
document.querySelector("#demo").scrollIntoView(true);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="seckill" v-if="goodsList.length">
|
||||
<!-- v-if="goodsList.length"-->
|
||||
<div class="seckill">
|
||||
<div class="aside hover-pointer" @click="goToSeckill">
|
||||
<div class="title">{{ actName }}</div>
|
||||
<div class="hour">
|
||||
|
||||
228
buyer/src/components/indexDecorate/modelList/forYour.vue
Normal file
228
buyer/src/components/indexDecorate/modelList/forYour.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<div class="model" v-if="data">
|
||||
<div class="for-your">{{ data.options.title }}</div>
|
||||
<div class="flex card">
|
||||
<div class="left">
|
||||
<img :src="data.options.data.image.src" alt="" />
|
||||
</div>
|
||||
<div class="right flex">
|
||||
<!-- 商品区 -->
|
||||
<div class="goods-list">
|
||||
<div
|
||||
class="goods-item"
|
||||
:key="index"
|
||||
v-for="(item, index) in data.options.data.list"
|
||||
@click="linkTo(item.url)"
|
||||
>
|
||||
<div>
|
||||
<div class="goods-name">{{ item.title }}</div>
|
||||
<div class="goods-desc">{{ item.desc }}</div>
|
||||
</div>
|
||||
<img class="goods-img" :src="item.img" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 热卖区 -->
|
||||
<div class="hot-list">
|
||||
<div class="hot-title">{{ data.options.data.hot.title }}</div>
|
||||
<div
|
||||
class="hot-item flex flex-a-c"
|
||||
v-for="(item, index) in data.options.data.hot.list"
|
||||
:key="index"
|
||||
@click="linkTo(item.url)"
|
||||
>
|
||||
<img :src="item.img" alt="" />
|
||||
<div class="hot-goods">
|
||||
<div class="hot-goods-title">{{ item.title }}</div>
|
||||
<div>
|
||||
<div class="hot-price">￥{{ item.price | unitPrice }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "forYour",
|
||||
data() {
|
||||
return {
|
||||
current: "",
|
||||
};
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: {},
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.goods-list {
|
||||
display: flex;
|
||||
width: 558px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.goods-item {
|
||||
width: 278px;
|
||||
height: 277px;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
border-right: 1.4px solid #e2e2e2;
|
||||
&:nth-of-type(3) {
|
||||
border-top: 1.4px solid #e2e2e2;
|
||||
}
|
||||
&:nth-of-type(4) {
|
||||
border-top: 1.4px solid #e2e2e2;
|
||||
}
|
||||
&:hover {
|
||||
/deep/ .goods-name {
|
||||
color: $theme_color;
|
||||
}
|
||||
/deep/ .goods-desc {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.goods-name {
|
||||
margin-top: 23px;
|
||||
font-size: 25px;
|
||||
font-weight: normal;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
|
||||
color: #333333;
|
||||
}
|
||||
.goods-img {
|
||||
width: 190px;
|
||||
height: 156px;
|
||||
margin-top: 19px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.goods-desc {
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 17px;
|
||||
text-align: center;
|
||||
margin-top: 11px;
|
||||
letter-spacing: 0px;
|
||||
|
||||
color: #333333;
|
||||
}
|
||||
.for-your {
|
||||
font-size: 35px;
|
||||
font-weight: normal;
|
||||
line-height: 42px;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
margin-bottom: 32px;
|
||||
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.card,
|
||||
.right-card {
|
||||
opacity: 1;
|
||||
background: #ffffff;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
box-shadow: 0px 1px 13px 0px #E5E5E5;
|
||||
|
||||
&:hover {
|
||||
.setup-box {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-tab-bar {
|
||||
> .flex {
|
||||
align-items: center;
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.draggable {
|
||||
> .flex {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.left {
|
||||
width: 346px;
|
||||
height: 554px;
|
||||
border-radius: 9.8px 0px 0px 9.8px;
|
||||
> img {
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 839px;
|
||||
height: 554px;
|
||||
border-radius: 0px 9.8px 9.8px 0px;
|
||||
}
|
||||
.hot-list {
|
||||
width: 279px;
|
||||
}
|
||||
.hot-title {
|
||||
margin-left: 25px;
|
||||
line-height: 63px;
|
||||
font-size: 17px;
|
||||
font-weight: normal;
|
||||
|
||||
letter-spacing: 0px;
|
||||
color: #333333;
|
||||
height: 63px;
|
||||
}
|
||||
.hot-item {
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
border-top: 1.4px solid #e2e2e2;
|
||||
height: 122px;
|
||||
padding:0 14px;
|
||||
align-items: center;
|
||||
&:hover {
|
||||
> .hot-goods {
|
||||
> .hot-goods-title {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> img {
|
||||
width: 76.3px;
|
||||
height: 77.7px;
|
||||
}
|
||||
}
|
||||
.hot-goods {
|
||||
margin-left: 14px;
|
||||
}
|
||||
.hot-goods-title {
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
line-height: 16px;
|
||||
letter-spacing: 0px;
|
||||
|
||||
color: #333333;
|
||||
}
|
||||
.hot-price {
|
||||
margin-top: 10.3px;
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
line-height: 29px;
|
||||
letter-spacing: 0px;
|
||||
|
||||
color: $theme_color;
|
||||
}
|
||||
</style>
|
||||
205
buyer/src/components/indexDecorate/modelList/goodsAndType.vue
Normal file
205
buyer/src/components/indexDecorate/modelList/goodsAndType.vue
Normal file
@@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<div class="goods-type-wrapper">
|
||||
<div class="flex goods-type-line">
|
||||
<div class="goods-type-title">{{ paramData.options.title }}</div>
|
||||
<div class="flex goods-type-labels">
|
||||
<div
|
||||
:class="{ active: current === item.___index }"
|
||||
class="goods-type-item"
|
||||
v-for="(item, index) in paramData.options.labels"
|
||||
:key="index"
|
||||
@click="handleClickLabel(item, index)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 商品部分 -->
|
||||
<div class="only-goods-list flex-j-sb">
|
||||
<div
|
||||
v-if="paramData.options"
|
||||
class="only-goods-list-item "
|
||||
v-for="(item, index) in paramData.options.list.filter((client) => {
|
||||
return client.___index == current;
|
||||
})"
|
||||
:key="index"
|
||||
@click="linkTo(item.url)"
|
||||
>
|
||||
<div class="goods-img">
|
||||
<img :src="item.img" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="goods-name wes-2">{{ item.title }}</div>
|
||||
<div class="goods-desc">{{ item.desc }}</div>
|
||||
</div>
|
||||
<div class="goods-price">
|
||||
{{ item.price | unitPrice("￥") }}
|
||||
</div>
|
||||
<!-- 查看 -->
|
||||
<div class="white-shadow">
|
||||
<div class="search">去查看</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "goods",
|
||||
props: {
|
||||
paramData: {
|
||||
type: Object,
|
||||
default: {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
current: "",
|
||||
};
|
||||
},
|
||||
watch: {},
|
||||
mounted() {
|
||||
this.current = this.paramData.options.labels[0].___index;
|
||||
},
|
||||
methods: {
|
||||
// 筛选出当前分类下的商品
|
||||
handleClickLabel(val, index) {
|
||||
this.current = index;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.white-shadow {
|
||||
width: 287px;
|
||||
height: 122px;
|
||||
border-radius: 0px 0px 10px 10px;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
transition: 0.35s;
|
||||
align-items: center;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(252, 252, 252, 0.58) -50%,
|
||||
#ffffff 99%
|
||||
);
|
||||
}
|
||||
.search {
|
||||
width: 143px;
|
||||
height: 45px;
|
||||
border-radius: 22.5px;
|
||||
opacity: 1;
|
||||
font-size: 20px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
line-height: 45px;
|
||||
color: #ffffff;
|
||||
background: $theme_color;
|
||||
}
|
||||
.only-goods-list{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
}
|
||||
.only-goods-list-item {
|
||||
padding-top: 30px;
|
||||
width: 287px;
|
||||
height: 343.7px;
|
||||
border-radius: 9.8px;
|
||||
opacity: 1;
|
||||
margin-bottom: 14.3px;
|
||||
cursor: pointer;
|
||||
background: #ffffff;
|
||||
transition: all 0.4s ease;
|
||||
box-shadow: 0px 1px 13px 0px #e5e5e5;
|
||||
position: relative;
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0px 1px 14px 0px #c5c5c5;
|
||||
> .white-shadow {
|
||||
opacity: 1;
|
||||
}
|
||||
> .goods-img {
|
||||
> img {
|
||||
opacity: 0.8 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.goods-img {
|
||||
margin-bottom: 9.8px;
|
||||
text-align: center;
|
||||
> img {
|
||||
transition: all 0.4s ease;
|
||||
width: auto;
|
||||
max-height: 183px;
|
||||
}
|
||||
}
|
||||
.goods-name {
|
||||
font-size: 18px;
|
||||
|
||||
font-weight: normal;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
width: 200px;
|
||||
margin: 0 auto 12.4px auto;
|
||||
color: #333333;
|
||||
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
||||
}
|
||||
.goods-desc {
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 17px;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
margin-bottom: 12.4px;
|
||||
color: #666666;
|
||||
|
||||
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
||||
}
|
||||
.goods-price {
|
||||
font-size: 25.2px;
|
||||
font-weight: normal;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
|
||||
color: #f31947;
|
||||
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
||||
}
|
||||
.goods-type-line {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.goods-type-title {
|
||||
font-size: 31px;
|
||||
font-weight: normal;
|
||||
line-height: 37px;
|
||||
letter-spacing: 0px;
|
||||
|
||||
color: #333333;
|
||||
}
|
||||
.active {
|
||||
color: #f31947;
|
||||
}
|
||||
.goods-type-labels {
|
||||
cursor: pointer;
|
||||
font-size: 21px;
|
||||
font-weight: normal;
|
||||
line-height: 25px;
|
||||
letter-spacing: 0px;
|
||||
}
|
||||
.goods-type-item {
|
||||
margin-left: 28px;
|
||||
}
|
||||
</style>
|
||||
53
buyer/src/components/indexDecorate/modelList/mixModel.vue
Normal file
53
buyer/src/components/indexDecorate/modelList/mixModel.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="mix-model">
|
||||
<!-- 左侧 -->
|
||||
<div class="left-card">
|
||||
<left :data="data" />
|
||||
</div>
|
||||
<!-- 右侧 -->
|
||||
<div class="right-card">
|
||||
<right :data="data" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import left from './mixs/mix-goods'
|
||||
import right from './mixs/mix-brand'
|
||||
export default {
|
||||
name: "mixModel",
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
left,
|
||||
right
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.mix-model{
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
}
|
||||
.left-card,.right-card{
|
||||
width: 584px;
|
||||
height: 344px;
|
||||
border-radius: 10px;
|
||||
opacity: 1;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 1px 13px 0px #E5E5E5;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
132
buyer/src/components/indexDecorate/modelList/mixs/mix-brand.vue
Normal file
132
buyer/src/components/indexDecorate/modelList/mixs/mix-brand.vue
Normal file
@@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<div class="flex" v-if="data.options.right.model == 'brand'">
|
||||
<div class="left-side" @click="linkTo(data.options.right.data.image.url)">
|
||||
<img :src="data.options.right.data.image.src" alt="">
|
||||
</div>
|
||||
<div class="right-side">
|
||||
<div class="badge-box flex">
|
||||
<div class="round">
|
||||
<Icon type="ios-arrow-forward" />
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="flex goods-list">
|
||||
<div class="goods-item flex" @click="linkTo(item.url)" :key="index" v-for="(item,index) in data.options.right.data.list">
|
||||
<div class="goods-thumbnail">
|
||||
<img :src="item.img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "mix-goods",
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
components: {},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.right-side{
|
||||
width: 330px;
|
||||
}
|
||||
.goods-detail-title{
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
color: #333333;
|
||||
}
|
||||
.goods-detail-price{
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 17px;
|
||||
letter-spacing: 0px;
|
||||
color: $theme_color;
|
||||
margin-top: 8px;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
.goods-thumbnail{
|
||||
margin-left: 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
>img{
|
||||
width:90px;
|
||||
height: 90px;
|
||||
}
|
||||
}
|
||||
.badge-box{
|
||||
margin-top: 33px;
|
||||
justify-content:right;
|
||||
>.round{
|
||||
width: 17.5px;
|
||||
height: 17.5px;
|
||||
opacity: 1;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 17.5px;
|
||||
border: 0.7px solid #333333;
|
||||
margin-right: 17.5px;
|
||||
}
|
||||
}
|
||||
.goods-list{
|
||||
width: 330px;
|
||||
flex-wrap: wrap;
|
||||
justify-content:space-between;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.goods-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width:50%;
|
||||
height: 85px;
|
||||
border-radius: 9.8px;
|
||||
opacity: 1;
|
||||
transition: .35s;
|
||||
background: #FFFFFF;
|
||||
margin-bottom:9px;
|
||||
|
||||
|
||||
}
|
||||
.left-side {
|
||||
>img{
|
||||
width: 254px;
|
||||
height: 344px;
|
||||
border-radius: 9.8px 0px 0px 9.8px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.badge {
|
||||
width: 50px;
|
||||
height: 27px;
|
||||
line-height:27px;
|
||||
border-radius: 13.3px 0px 0px 13.3px;
|
||||
opacity: 1;
|
||||
background: #F31947;
|
||||
font-size: 12.6px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
color: #FFFFFF;
|
||||
margin-top: 26px;
|
||||
margin-bottom:17px;
|
||||
}
|
||||
</style>
|
||||
127
buyer/src/components/indexDecorate/modelList/mixs/mix-goods.vue
Normal file
127
buyer/src/components/indexDecorate/modelList/mixs/mix-goods.vue
Normal file
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<div class="flex" v-if="data.options.left.model == 'goods'">
|
||||
<div class="left-side" @click="linkTo(data.options.right.data.image.url)">
|
||||
<img :src="data.options.left.data.image.src" alt="">
|
||||
</div>
|
||||
<div class="right-side">
|
||||
<div class="badge-box flex">
|
||||
<div class="badge" @click="linkTo(data.options.right.data.image.url)">
|
||||
{{data.options.left.data.badge.label}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex goods-list">
|
||||
|
||||
<div class="goods-item flex" @click="linkTo(item.url)" :key="index" v-for="(item,index) in data.options.left.data.list">
|
||||
<div class="goods-thumbnail">
|
||||
<img :src="item.img" alt="">
|
||||
</div>
|
||||
<div class="goods-detail">
|
||||
<div class="goods-detail-title">{{item.title}}</div>
|
||||
<div class="goods-detail-price">{{item.price | unitPrice('¥')}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "mix-goods",
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
components: {},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.right-side{
|
||||
width: 387px;
|
||||
}
|
||||
.goods-detail-title{
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
color: #333333;
|
||||
}
|
||||
.goods-detail-price{
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 17px;
|
||||
letter-spacing: 0px;
|
||||
color: #F31947;
|
||||
margin-top: 8px;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
.goods-thumbnail{
|
||||
margin-left: 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
>img{
|
||||
width:90px;
|
||||
height: 90px;
|
||||
}
|
||||
}
|
||||
.badge-box{
|
||||
|
||||
justify-content:right;
|
||||
}
|
||||
.goods-list{
|
||||
width: 387px;
|
||||
flex-wrap: wrap;
|
||||
justify-content:space-between;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.goods-item{
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 173.6px;
|
||||
height: 119px;
|
||||
border-radius: 9.8px;
|
||||
opacity: 1;
|
||||
transition: .35s;
|
||||
background: #FFFFFF;
|
||||
margin-bottom:9px;
|
||||
&:hover{
|
||||
box-shadow: 0px 1px 6px 0px #E5E5E5;
|
||||
}
|
||||
|
||||
}
|
||||
.left-side {
|
||||
>img{
|
||||
border-radius: 10px 0px 0px 10px;
|
||||
display: block;
|
||||
width: 196.7px;
|
||||
height: 343.7px;
|
||||
}
|
||||
}
|
||||
.badge {
|
||||
width: 50px;
|
||||
height: 27px;
|
||||
line-height:27px;
|
||||
border-radius: 13.3px 0px 0px 13.3px;
|
||||
opacity: 1;
|
||||
background: #F31947;
|
||||
font-size: 12.6px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
color: #FFFFFF;
|
||||
margin-top: 26px;
|
||||
margin-bottom:17px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div class="line flex flex-a-c flex-j-sb">
|
||||
<div class="column" v-for="(item,index) in data.options.list" :key="index">
|
||||
<img :src="item.img" class="three-column-img">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "oneRowThreeColumns",
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.column{
|
||||
width: 385px;
|
||||
height: 165px;
|
||||
>img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
186
buyer/src/components/indexDecorate/modelList/onlyGoodsModel.vue
Normal file
186
buyer/src/components/indexDecorate/modelList/onlyGoodsModel.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<div class="goods-type-wrapper">
|
||||
<!-- 商品部分 -->
|
||||
<div class="only-goods-list flex" >
|
||||
<div
|
||||
class="only-goods-list-item"
|
||||
v-for="(item, index) in data.options.list"
|
||||
:key="index"
|
||||
@click="handleClick(item)"
|
||||
>
|
||||
<div>
|
||||
<div class="goods-name wes-2">{{ item.title }}</div>
|
||||
<div class="goods-desc">{{ item.desc }}</div>
|
||||
</div>
|
||||
<div class="goods-img">
|
||||
<img :src="item.img" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "onlyGoodsList",
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
flag:false,
|
||||
tabIndex:0,
|
||||
current: 0,
|
||||
showModal: false,
|
||||
selected: {}, // 已选数据
|
||||
picModelFlag: false,
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods: {
|
||||
handleClick(val){
|
||||
this.linkTo(val.url)
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.goods-type-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
.del-btn{
|
||||
margin-left:10px;
|
||||
}
|
||||
.tab-bar {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.draggable {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #ededed;
|
||||
transition: 0.35s;
|
||||
|
||||
&:hover {
|
||||
background-color: #ededed;
|
||||
}
|
||||
}
|
||||
.column-config {
|
||||
margin-left: 10px;
|
||||
> * {
|
||||
margin: 4px;
|
||||
}
|
||||
}
|
||||
.column-img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.add-goods {
|
||||
margin-left: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.only-goods-list {
|
||||
position: relative;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
&:hover {
|
||||
> .setup-box {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.column-goods-config {
|
||||
flex: 2;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.only-goods-list-item {
|
||||
padding-top: 34.8px;
|
||||
margin-bottom: 14.3px;
|
||||
width: 287px;
|
||||
height: 343.7px;
|
||||
border-radius: 9.8px;
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
background: #ffffff;
|
||||
transition: 0.35s;
|
||||
box-shadow: 0px 1px 13px 0px #e5e5e5;
|
||||
&:hover {
|
||||
box-shadow: 0px 1px 14px 0px #c5c5c5;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
.goods-img {
|
||||
text-align: center;
|
||||
> img {
|
||||
width: auto;
|
||||
max-height: 183px;
|
||||
}
|
||||
}
|
||||
.goods-name {
|
||||
margin-bottom: 11.9px;
|
||||
font-size: 25px;
|
||||
font-weight: normal;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
|
||||
color: #333333;
|
||||
|
||||
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
||||
}
|
||||
.goods-desc {
|
||||
margin-bottom: 30px;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
line-height: 19px;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
|
||||
color: #666666;
|
||||
|
||||
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
||||
}
|
||||
.goods-price {
|
||||
font-size: 25.2px;
|
||||
font-weight: normal;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
|
||||
color: $theme_color;
|
||||
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
||||
}
|
||||
.goods-type-line {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.goods-type-title {
|
||||
font-size: 31px;
|
||||
font-weight: normal;
|
||||
line-height: 37px;
|
||||
letter-spacing: 0px;
|
||||
|
||||
color: #333333;
|
||||
}
|
||||
.active {
|
||||
color: $theme_color;
|
||||
}
|
||||
.goods-type-labels {
|
||||
font-size: 21px;
|
||||
font-weight: normal;
|
||||
line-height: 25px;
|
||||
letter-spacing: 0px;
|
||||
}
|
||||
.goods-type-item {
|
||||
margin-left: 28px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user