362 lines
8.9 KiB
Vue
362 lines
8.9 KiB
Vue
<template>
|
|
<view class="flex-col page">
|
|
<swiper><swiper-item v-for="(item, index) in items" :key="index"></swiper-item></swiper>
|
|
<view class="flex-col section">
|
|
<view class="flex-col">
|
|
<text class="self-start font text text_2">热门精品</text>
|
|
<view class="flex-col justify-start items-end self-stretch relative mt-16">
|
|
<view class="flex-row items-center section_3">
|
|
<text class="font_2 text_4">非遗工坊</text>
|
|
<image
|
|
class="shrink-0 image_2 ml-13"
|
|
:src="shizi"
|
|
/>
|
|
</view>
|
|
<view class="flex-row items-center section_2 pos">
|
|
<image
|
|
class="image_2"
|
|
:src="rili"
|
|
/>
|
|
<text class="font_2 text_3 ml-9">写真预约</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex-col group mt-24">
|
|
<view class="flex-row justify-between group_2">
|
|
<text class="self-center font_3 text text_5">推荐商品</text>
|
|
<view class="flex-row self-start group_3">
|
|
<text class="font_4">更多</text>
|
|
<image
|
|
class="shrink-0 image_3"
|
|
:src="you"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view class="flex-row equal-division">
|
|
<view class="flex-col section_4 equal-division-item">
|
|
<view class="flex-col items-start self-stretch" @click="jump_product">
|
|
<image
|
|
class="image_4"
|
|
:src="product"
|
|
/>
|
|
<text class="font_5 text_6 mt-2">琉璃发体验包</text>
|
|
</view>
|
|
<text class="self-start font_6 text_7 mt-7">￥750</text>
|
|
</view>
|
|
<view class="flex-col section_4 equal-division-item ml-9">
|
|
<view class="flex-col items-start self-stretch">
|
|
<image
|
|
class="image_4"
|
|
:src="product"
|
|
/>
|
|
<text class="font_5 text_6 mt-2">琉璃发体验包</text>
|
|
</view>
|
|
<text class="self-start font_6 text_7 mt-7">￥750</text>
|
|
</view>
|
|
<view class="flex-col section_4 equal-division-item ml-9">
|
|
<view class="flex-col items-start self-stretch">
|
|
<image
|
|
class="image_4"
|
|
:src="product"
|
|
/>
|
|
<text class="font_5 text_6 mt-2">琉璃发体验包</text>
|
|
</view>
|
|
<text class="self-start font_6 text_7 mt-7">￥750</text>
|
|
</view>
|
|
</view>
|
|
<view class="flex-row justify-between group_2 view">
|
|
<text class="self-center font_3 text text_8">推荐服务</text>
|
|
<view class="flex-row self-start group_3">
|
|
<text class="font_4">更多</text>
|
|
<image
|
|
class="shrink-0 image_3"
|
|
:src="you"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view class="flex-row equal-division_2">
|
|
<view class="flex-col section_4 equal-division-item">
|
|
<view class="flex-col items-start self-stretch">
|
|
<image
|
|
class="image_4"
|
|
:src="product"
|
|
/>
|
|
<text class="font_5 text_6 mt-2">琉璃发体验包</text>
|
|
</view>
|
|
<text class="self-start font_6 text_7 mt-7">￥750</text>
|
|
</view>
|
|
<view class="flex-col section_4 equal-division-item ml-9">
|
|
<view class="flex-col items-start self-stretch">
|
|
<image
|
|
class="image_4"
|
|
:src="product"
|
|
/>
|
|
<text class="font_5 text_6 mt-2">琉璃发体验包</text>
|
|
</view>
|
|
<text class="self-start font_6 text_7 mt-7">￥750</text>
|
|
</view>
|
|
<view class="flex-col section_4 equal-division-item ml-9">
|
|
<view class="flex-col items-start self-stretch">
|
|
<image
|
|
class="image_4"
|
|
:src="product"
|
|
/>
|
|
<text class="font_5 text_6 mt-2">琉璃发体验包</text>
|
|
</view>
|
|
<text class="self-start font_6 text_7 mt-7">￥750</text>
|
|
</view>
|
|
</view>
|
|
<view class="flex-row justify-between items-end group_4">
|
|
<text class="font text text_9">活动资讯</text>
|
|
<view class="flex-row group_5">
|
|
<text class="font_4">更多</text>
|
|
<image
|
|
class="shrink-0 image_3"
|
|
:src="you"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex-col list mt-24">
|
|
<view class="flex-row items-center list-item" v-for="(item, index) in items_1" :key="index">
|
|
<view class="flex-col items-start flex-1">
|
|
<text class="font_5 text_13">“五色五育”研学——端午香囊篇</text>
|
|
<text class="font_7 text_11 mt-13">为进一步深入贯彻落实习近平总书记...</text>
|
|
<text class="font_8 text_15 mt-13">2024-08-04</text>
|
|
</view>
|
|
<image
|
|
class="shrink-0 image_5 ml-21"
|
|
:src="xuanchuan"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {ref} from 'vue'
|
|
import dec from '@/pages/home/img/dec.png'
|
|
import product from '@/pages/home/img/product.png'
|
|
import right from '@/pages/home/img/right.png'
|
|
import left from '@/pages/home/img/left.png'
|
|
import rili from '@/pages/home/img/rili.png'
|
|
import xuanchuan from '@/pages/home/img/xuanchuan.png'
|
|
import shizi from '@/pages/home/img/shizi.png'
|
|
import you from '@/pages/home/img/you.png'
|
|
|
|
const items = ref( [null, null, null])
|
|
const items_1 = ref( [null, null, null])
|
|
|
|
const jump_product =()=>{
|
|
uni.navigateTo({
|
|
url:'../../pages/store-home/ProductDetails/ProductDetails'
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.ml-13 {
|
|
margin-left: 24.38rpx;
|
|
}
|
|
.ml-9 {
|
|
margin-left: 16.88rpx;
|
|
}
|
|
.mt-7 {
|
|
margin-top: 13.13rpx;
|
|
}
|
|
.mt-13 {
|
|
margin-top: 24.38rpx;
|
|
}
|
|
.ml-21 {
|
|
margin-left: 39.38rpx;
|
|
}
|
|
.page {
|
|
background-color: #fbf2e3;
|
|
width: 100%;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
height: 100%;
|
|
}
|
|
.section {
|
|
padding: 17.85rpx 7.5rpx 49.88rpx 13.13rpx;
|
|
background-color: #fff9ed;
|
|
border-radius: 37.5rpx 37.5rpx 0 0;
|
|
}
|
|
.font {
|
|
font-size: 45rpx;
|
|
font-family: STZhongsong;
|
|
line-height: 41.98rpx;
|
|
color: transparent;
|
|
}
|
|
.section_3 {
|
|
padding: 15rpx 30rpx 13.13rpx;
|
|
background-image: url('https://s21.ax1x.com/2024/10/18/pAUf6aT.png');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.font_2 {
|
|
font-size: 30rpx;
|
|
font-family: Inter;
|
|
line-height: 28.29rpx;
|
|
font-weight: 700;
|
|
color: #5c1416;
|
|
}
|
|
.text_4 {
|
|
margin-left: 77.66rpx;
|
|
line-height: 28.56rpx;
|
|
}
|
|
.image_2 {
|
|
width: 86.25rpx;
|
|
height: 86.25rpx;
|
|
}
|
|
.section_2 {
|
|
padding: 15rpx 26.25rpx 13.13rpx;
|
|
background-image: url('https://s21.ax1x.com/2024/10/18/pAUfrq0.png');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
width: 371.25rpx;
|
|
}
|
|
.pos {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
.text_3 {
|
|
line-height: 28.31rpx;
|
|
}
|
|
.group {
|
|
padding: 0 28.5rpx;
|
|
}
|
|
.group_2 {
|
|
padding-left: 8.34rpx;
|
|
padding-right: 5.25rpx;
|
|
}
|
|
.font_3 {
|
|
font-size: 45rpx;
|
|
font-family: Open Sans;
|
|
line-height: 41.98rpx;
|
|
color: transparent;
|
|
}
|
|
.text {
|
|
background-image: linear-gradient(270deg, #7e0d11 0%, #a54747 50%, #7e0d11 100%);
|
|
-webkit-background-clip: text;
|
|
text-shadow: 3.75rpx 3.75rpx 3.75rpx #00000040;
|
|
}
|
|
.text_2 {
|
|
margin-left: 25.31rpx;
|
|
}
|
|
.text_5 {
|
|
line-height: 41.49rpx;
|
|
}
|
|
.group_3 {
|
|
margin-top: 17.21rpx;
|
|
}
|
|
.font_4 {
|
|
font-size: 30rpx;
|
|
font-family: Open Sans;
|
|
line-height: 28.29rpx;
|
|
font-weight: 700;
|
|
color: #9a714d;
|
|
}
|
|
.image_3 {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
}
|
|
.equal-division {
|
|
margin: 28.13rpx 29.63rpx 0 7.13rpx;
|
|
}
|
|
.section_4 {
|
|
flex: 1 1 200.63rpx;
|
|
}
|
|
.equal-division-item {
|
|
padding: 9.88rpx 8.61rpx 33.47rpx 13.89rpx;
|
|
background-color: #fffef8;
|
|
border-radius: 9.38rpx;
|
|
height: 268.13rpx;
|
|
border: solid 1.88rpx #ac8d5d;
|
|
}
|
|
.image_4 {
|
|
border-radius: 9.38rpx;
|
|
width: 159.99rpx;
|
|
height: 159.99rpx;
|
|
}
|
|
.font_5 {
|
|
font-size: 26.25rpx;
|
|
font-family: Open Sans;
|
|
line-height: 26.16rpx;
|
|
color: #000000;
|
|
}
|
|
.text_6 {
|
|
font-size: 28.13rpx;
|
|
}
|
|
.font_6 {
|
|
font-size: 26.25rpx;
|
|
font-family: STFangsong;
|
|
line-height: 18rpx;
|
|
color: #ff0000;
|
|
}
|
|
.text_7 {
|
|
margin-left: 3.04rpx;
|
|
-webkit-text-stroke: 1.88rpx #ff000040;
|
|
}
|
|
.view {
|
|
margin-top: 42.79rpx;
|
|
}
|
|
.text_8 {
|
|
line-height: 41.53rpx;
|
|
}
|
|
.equal-division_2 {
|
|
margin: 24.38rpx 29.63rpx 0 7.13rpx;
|
|
}
|
|
.group_4 {
|
|
margin-top: 30.71rpx;
|
|
}
|
|
.text_9 {
|
|
margin-bottom: 3.41rpx;
|
|
line-height: 42.75rpx;
|
|
}
|
|
.group_5 {
|
|
margin-right: 10.88rpx;
|
|
}
|
|
.list {
|
|
margin-left: 26.25rpx;
|
|
margin-right: 30rpx;
|
|
padding: 5.63rpx 0 39.38rpx;
|
|
background-color: #f7e7c6;
|
|
border-radius: 18.75rpx;
|
|
}
|
|
.list-item {
|
|
padding: 31.88rpx 30.36rpx 16.88rpx;
|
|
}
|
|
.text_13 {
|
|
line-height: 24.39rpx;
|
|
}
|
|
.font_7 {
|
|
font-size: 22.5rpx;
|
|
font-family: Open Sans;
|
|
line-height: 20.89rpx;
|
|
color: #6c6c6c;
|
|
}
|
|
.text_11 {
|
|
margin-left: 8.36rpx;
|
|
}
|
|
.font_8 {
|
|
font-size: 22.5rpx;
|
|
font-family: Open Sans;
|
|
line-height: 18rpx;
|
|
color: #6c6c6c;
|
|
}
|
|
.text_15 {
|
|
margin-left: 8.27rpx;
|
|
line-height: 16.54rpx;
|
|
}
|
|
.image_5 {
|
|
margin-right: 3.39rpx;
|
|
width: 178.13rpx;
|
|
height: 127.5rpx;
|
|
}
|
|
@import url(../../common/css/global.css);
|
|
|
|
</style>
|