302 lines
7.3 KiB
Vue
302 lines
7.3 KiB
Vue
<template>
|
|
<view class="content" style="background-color: #FFFDF6;">
|
|
|
|
<image src="@@:static/bg.png" style="width: 620.83rpx; height: 100%; position: absolute;" mode=""></image>
|
|
|
|
|
|
<view class="content" style="position: absolute;">
|
|
<!-- 搜索 -->
|
|
<view class="" style="width: 100%; margin-top: 96.53rpx;">
|
|
<view class=""
|
|
style="width: 230.56rpx; height: 71.53rpx; background-color: #FFFFFF; border: 5rpx solid #F5D677; border-radius: 50rpx; display: flex; align-items: center;">
|
|
<image src="@@:static/ic_search.png" style="width: 28.47rpx; height: 28.47rpx; margin-left: 25rpx;"
|
|
mode=""></image>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 公告 -->
|
|
<view class=""
|
|
style="width:100%; height: 57.64rpx; background-color: #FFFFFF; border: 5rpx solid #F5D677; border-radius: 20rpx; margin-top: 33.33rpx; display: flex; align-items: center;">
|
|
|
|
<image src="@@:static/ic_notice.png" style="width: 23.61rpx; height: 22.92rpx; margin-left: 24.31rpx;"
|
|
mode=""></image>
|
|
<view class="news-text">
|
|
<uni-notice-bar scrollable single :style="{ width: `100%` }" :speed="8"
|
|
background-color="transparent" color="#6B5E4B" text="感谢您的理解与支持"></uni-notice-bar>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<!-- 轮播图 -->
|
|
<view class="" style="width: 100%; margin-top: 30.56rpx; ">
|
|
<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500" :circular="true">
|
|
<swiper-item v-for="(item, index) in swiperList" :key="index">
|
|
<view class="" style="background-color: #F5D677; width: 100%; height: 300rpx;">
|
|
{{ item }}
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
|
|
<!-- 固定四个 -->
|
|
<view class=""
|
|
style="width: 100%; display: flex; flex-direction: row; justify-content: space-between; margin-top: 29.86rpx;">
|
|
|
|
<view class="" v-for="(item, index) in dataList" @click="toDetails(dataList[index].id)"
|
|
style="display: flex; flex-direction: column; justify-content: center;">
|
|
|
|
<view class=""
|
|
style="width: 159.72rpx; height: 159.72rpx; background-color: #FDF4D5; border-radius: 40rpx;"
|
|
:style="{ border: `2px solid ${item.color}` }">
|
|
</view>
|
|
|
|
<text class="myZt-500w"
|
|
style="text-align: center; margin-top: 13.19rpx; font-size: 22.22rpx; color: #685952; width: 159.72rpx; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">{{ item.title }}</text>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
<!-- tab -->
|
|
<view class="" style="width: 100%; display: flex; flex-direction: row; margin-top: 32.64rpx;">
|
|
<view class="" v-for="(item, index) in tabList" @click="clickTab(index)" :style="setTabBg(index)"
|
|
style="padding: 0 16.67rpx 6rpx 16.67rpx ; margin-right: 26.39rpx; border-radius: 50rpx;">
|
|
<text class="myZt-500w" style=" font-size: 23.61rpx;">{{ item.title }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- 商品列表 -->
|
|
|
|
<view class="grid-container">
|
|
<view class="" v-for="(item, index) in goodsLsit"
|
|
style="height: 490.28rpx; background-color: #FEF6D6; border: 3rpx solid #F9D051; border-radius: 40rpx;display: flex; flex-direction: column;">
|
|
<view class=""
|
|
style="width: 100%; height: 320.83rpx; background-color: #FFFFFF;border-radius: 40rpx 40rpx 0 0; ">
|
|
<!-- <image :src="{{item.imgUrl}}" mode=""></image> -->
|
|
</view>
|
|
|
|
<text class="myZt-500w"
|
|
style="width: 280.56rpx; margin: 15.28rpx auto; font-size: 25rpx; color: #685952;
|
|
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;">{{ item.title }}
|
|
</text>
|
|
|
|
|
|
<text class="myZt-300w" style="font-size: 19.44rpx; color: #FF6A6A; margin-left: 24.31rpx;">现货发售中</text>
|
|
|
|
<view class="" style="display: flex; flex-direction: row; margin-left: 20.31rpx;">
|
|
<text class="myZt-500w" style="font-size: 29.17rpx; color: #87644E;">￥{{ item.price }}</text>
|
|
<text class="myZt-500w" style="font-size: 19.44rpx; color: #87644E; margin-top: 10rpx;"> / 包</text>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
currendIndex: 0,
|
|
swiperList: [1, 2, 3, 4],
|
|
dataList: [{
|
|
id: 1,
|
|
title: "坂本日常",
|
|
color: "#90BB76",
|
|
url: ""
|
|
},
|
|
{
|
|
id: 1,
|
|
title: "坂本日常",
|
|
color: "#FDA6AA",
|
|
url: ""
|
|
},
|
|
{
|
|
id: 1,
|
|
title: "坂本日常",
|
|
color: "#96ABEB",
|
|
url: ""
|
|
},
|
|
{
|
|
id: 1,
|
|
title: "坂本日常",
|
|
color: "#F9D051",
|
|
url: ""
|
|
}
|
|
],
|
|
|
|
tabList: [{
|
|
id: 1,
|
|
title: "全部"
|
|
}, {
|
|
id: 1,
|
|
title: "吧唧"
|
|
},
|
|
{
|
|
id: 1,
|
|
title: "立牌"
|
|
},
|
|
{
|
|
id: 1,
|
|
title: "色纸"
|
|
},
|
|
{
|
|
id: 1,
|
|
title: "拍立得"
|
|
}
|
|
],
|
|
goodsLsit: [{
|
|
id: 1,
|
|
title: "坂本日常坂本日常坂本日常坂本日常坂本日常坂本日常坂本日常坂本日常坂本日常",
|
|
imgUrl: "",
|
|
type: "",
|
|
price: "20"
|
|
},
|
|
{
|
|
id: 1,
|
|
title: "坂本日常坂本日常坂本日常坂本日常",
|
|
imgUrl: "",
|
|
type: "",
|
|
price: "20"
|
|
},
|
|
{
|
|
id: 1,
|
|
title: "坂本日常坂本日常坂本日常坂本日常",
|
|
imgUrl: "",
|
|
type: "",
|
|
price: "20"
|
|
},
|
|
{
|
|
id: 1,
|
|
title: "坂本日常坂本日常坂本日常坂本日常",
|
|
imgUrl: "",
|
|
type: "",
|
|
price: "20"
|
|
},
|
|
{
|
|
id: 1,
|
|
title: "坂本日常坂本日常坂本日常坂本日常",
|
|
imgUrl: "",
|
|
type: "",
|
|
price: "20"
|
|
},
|
|
{
|
|
id: 1,
|
|
title: "坂本日常坂本日常坂本日常坂本日常",
|
|
imgUrl: "",
|
|
type: "",
|
|
price: "20"
|
|
},
|
|
{
|
|
id: 1,
|
|
title: "坂本日常坂本日常坂本日常坂本日常",
|
|
imgUrl: "",
|
|
type: "",
|
|
price: "20"
|
|
},
|
|
{
|
|
id: 1,
|
|
title: "坂本日常坂本日常坂本日常坂本日常",
|
|
imgUrl: "",
|
|
type: "",
|
|
price: "20"
|
|
},
|
|
{
|
|
id: 1,
|
|
title: "坂本日常坂本日常坂本日常坂本日常",
|
|
imgUrl: "",
|
|
type: "",
|
|
price: "20"
|
|
},
|
|
{
|
|
id: 1,
|
|
title: "坂本日常坂本日常坂本日常坂本日常",
|
|
imgUrl: "",
|
|
type: "",
|
|
price: "20"
|
|
}
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
clickTab(index) {
|
|
this.currendIndex = index;
|
|
},
|
|
|
|
setTabBg(index) {
|
|
if (this.currendIndex == index) {
|
|
return {
|
|
backgroundColor: '#F5D677',
|
|
border: '1rpx solid transparent'
|
|
}
|
|
} else {
|
|
return {
|
|
backgroundColor: 'transparent',
|
|
border: '1rpx solid #9A8F79'
|
|
}
|
|
}
|
|
},
|
|
|
|
toDetails(id) {
|
|
uni.navigateTo({
|
|
url: '/pages/home/product-details?id=' + id
|
|
});
|
|
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.content {
|
|
width: 693.06rpx;
|
|
height: 100vh;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.news-text {
|
|
width: 600rpx;
|
|
height: 57.64rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 18rpx;
|
|
padding-top: 20rpx;
|
|
|
|
::v-deep.uni-noticebar__content-text {
|
|
font-size: 22.22rpx;
|
|
font-family: "JiangChengYuanTi-300W", sans-serif;
|
|
}
|
|
}
|
|
|
|
.grid-container {
|
|
width: 100%;
|
|
display: grid;
|
|
/* 3列等宽 */
|
|
grid-template-columns: repeat(2, 1fr);
|
|
/* 间距 */
|
|
gap: 34.72rpx;
|
|
padding: 20rpx;
|
|
}
|
|
</style> |