admin1/jiangchengfeiyi-xiaochengxu
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
c2283ca65c
jiangchengfeiyi-xiaochengxu/pages/home/home/home.vue
sa_10_0 c2283ca65c wsdwe
2024-10-18 13:33:34 +08:00

384 lines
11 KiB
Vue
Raw Blame History

<template>
<view class="flex-col page">
<view class="flex-col justify-start items-end relative section">
<text class="text">脸谱泥人</text>
<image
class="image pos"
src="https://ide.code.fun/api/image?token=6708b7af1511d900114a2edd&name=32f7cfa041cbda3ed7428e65736bcf18.png"
/>
</view>
<view class="flex-col relative section_2">
<view class="flex-col">
<text class="self-start font text_2 text_3">热门精品</text>
<view class="mt-16 flex-col justify-start items-end self-stretch relative">
<view class="flex-row items-center section_4">
<text class="font_2 text_5">非遗工坊</text>
<image
class="shrink-0 image_2 ml-13"
src="https://ide.code.fun/api/image?token=6708b7af1511d900114a2edd&name=f4de3d65b31c1d47278605b75adc3244.png"
/>
</view>
<view class="flex-row items-center section_3 pos_2">
<image
class="image_2"
src="https://ide.code.fun/api/image?token=6708b7af1511d900114a2edd&name=8dd1733f1fdb37d3bb4b1c1f6afb39d8.png"
/>
<navigator url="/pages/booking/AppointmentHome" >
<text class="font_2 text_4 ml-9">写真预约</text>
</navigator>
</view>
</view>
</view>
<view class="mt-24 flex-col group">
<view class="flex-row justify-between group_2">
<text class="self-center font_3 text_2 text_6">推荐商品</text>
<view class="flex-row self-start group_3">
<text class="font_4">更多</text>
<image
class="shrink-0 image_3"
src="https://ide.code.fun/api/image?token=6708b7af1511d900114a2edd&name=da2cb20b23a8885dcbb1fc7e94f13d8c.png"
/>
</view>
</view>
<view class="flex-row equal-division">
<view class="flex-col section_5 equal-division-item">
<view class="flex-col items-start self-stretch">
<image
class="image_4"
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/66d052e3d54496f19fdc6706/66d05ffa63765d0012a2cbee/9c2dd4462de150cf84cffea8f92edd48.png"
/>
<text class="mt-2 font_5 text_7">琉璃发体验包</text>
</view>
<text class="self-start font_6 text_8 mt-7">￥750</text>
</view>
<view class="flex-col section_5 equal-division-item ml-9">
<view class="flex-col items-start self-stretch">
<image
class="image_4"
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/66d052e3d54496f19fdc6706/66d05ffa63765d0012a2cbee/9c2dd4462de150cf84cffea8f92edd48.png"
/>
<text class="mt-2 font_5 text_7">琉璃发体验包</text>
</view>
<text class="self-start font_6 text_8 mt-7">￥750</text>
</view>
<view class="flex-col section_5 equal-division-item ml-9">
<view class="flex-col items-start self-stretch">
<image
class="image_4"
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/66d052e3d54496f19fdc6706/66d05ffa63765d0012a2cbee/9c2dd4462de150cf84cffea8f92edd48.png"
/>
<text class="mt-2 font_5 text_7">琉璃发体验包</text>
</view>
<text class="self-start font_6 text_8 mt-7">￥750</text>
</view>
</view>
<view class="flex-row justify-between group_2 view">
<text class="self-center font_3 text_2 text_9">推荐服务</text>
<view class="flex-row self-start group_3">
<text class="font_4">更多</text>
<image
class="shrink-0 image_3"
src="https://ide.code.fun/api/image?token=6708b7af1511d900114a2edd&name=da2cb20b23a8885dcbb1fc7e94f13d8c.png"
/>
</view>
</view>
<view class="flex-row equal-division_2">
<view class="flex-col section_5 equal-division-item">
<view class="flex-col items-start self-stretch">
<image
class="image_4"
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/66d052e3d54496f19fdc6706/66d05ffa63765d0012a2cbee/9c2dd4462de150cf84cffea8f92edd48.png"
/>
<text class="mt-2 font_5 text_7">琉璃发体验包</text>
</view>
<text class="self-start font_6 text_8 mt-7">￥750</text>
</view>
<view class="flex-col section_5 equal-division-item ml-9">
<view class="flex-col items-start self-stretch">
<image
class="image_4"
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/66d052e3d54496f19fdc6706/66d05ffa63765d0012a2cbee/9c2dd4462de150cf84cffea8f92edd48.png"
/>
<text class="mt-2 font_5 text_7">琉璃发体验包</text>
</view>
<text class="self-start font_6 text_8 mt-7">￥750</text>
</view>
<view class="flex-col section_5 equal-division-item ml-9">
<view class="flex-col items-start self-stretch">
<image
class="image_4"
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/66d052e3d54496f19fdc6706/66d05ffa63765d0012a2cbee/9c2dd4462de150cf84cffea8f92edd48.png"
/>
<text class="mt-2 font_5 text_7">琉璃发体验包</text>
</view>
<text class="self-start font_6 text_8 mt-7">￥750</text>
</view>
</view>
<view class="flex-row justify-between items-end group_4">
<text class="font text_2 text_10">活动资讯</text>
<view class="flex-row group_5">
<text class="font_4">更多</text>
<image
class="shrink-0 image_3"
src="https://ide.code.fun/api/image?token=6708b7af1511d900114a2edd&name=da2cb20b23a8885dcbb1fc7e94f13d8c.png"
/>
</view>
</view>
</view>
<view class="mt-24 flex-col list">
<view class="flex-row items-center list-item" v-for="(item, index) in items" :key="index">
<view class="flex-col items-start flex-1">
<text class="font_5 text_11">“五色五育”研学——端午香囊篇</text>
<text class="font_7 text_12 mt-13">为进一步深入贯彻落实习近平总书记...</text>
<text class="font_8 text_13 mt-13">2024-08-04</text>
</view>
<image
class="shrink-0 image_5 ml-21"
src="https://ide.code.fun/api/image?token=6708b7af1511d900114a2edd&name=42a86bab4dc94295706fbf1b3480c571.png"
/>
</view>
</view>
</view>
</view>
</template>
<script setup>
import {ref} from 'vue'
const items = ref( [null, null, null, null])
</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;
height: 100%;
border-left: solid 1.88rpx #000000;
border-right: solid 1.88rpx #000000;
border-top: solid 1.88rpx #000000;
border-bottom: solid 1.88rpx #000000;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
}
.section {
padding: 105rpx 0 307.5rpx;
background-image: url('https://ide.code.fun/api/image?token=6708b7af1511d900114a2edd&name=474410b7e0698835f71f490efeafcfeb.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
.text {
margin-right: 48.75rpx;
color: transparent;
font-size: 60rpx;
font-family: STZhongsong;
line-height: 57.36rpx;
background-image: linear-gradient(90deg, #ffe3a5 0%, #fff4dc 50%, #ffe3a5 100%);
-webkit-background-clip: text;
}
.image {
width: 286.88rpx;
height: 234.38rpx;
}
.pos {
position: absolute;
right: 37.5rpx;
bottom: 105rpx;
}
.section_2 {
margin-top: -65.63rpx;
padding: 18.75rpx 7.5rpx 48.75rpx 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_4 {
padding: 15rpx 30rpx;
background-image: url('https://ide.code.fun/api/image?token=6708b7af1511d900114a2edd&name=d2d686bc17d9d76e7b320e5a4ea70952.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_5 {
margin-left: 78.75rpx;
line-height: 28.56rpx;
}
.image_2 {
width: 86.25rpx;
height: 86.25rpx;
}
.section_3 {
padding: 15rpx 26.25rpx;
background-image: url('https://ide.code.fun/api/image?token=6708b7af1511d900114a2edd&name=aa376a23521cc37d71891264189a3902.png');
background-size: 100% 100%;
background-repeat: no-repeat;
width: 371.25rpx;
}
.pos_2 {
position: absolute;
left: 0;
top: 0;
}
.text_4 {
line-height: 28.31rpx;
}
.group {
padding: 0 30rpx;
}
.group_2 {
padding: 0 7.5rpx;
}
.font_3 {
font-size: 45rpx;
font-family: Open Sans;
line-height: 41.98rpx;
color: transparent;
}
.text_2 {
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_3 {
margin-left: 26.25rpx;
}
.text_6 {
line-height: 41.49rpx;
}
.group_3 {
margin-top: 18.75rpx;
}
.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 30rpx 0 7.5rpx;
}
.section_5 {
flex: 1 1 200.63rpx;
}
.equal-division-item {
padding: 11.25rpx 7.5rpx 33.75rpx 15rpx;
background-color: #fffef8;
border-radius: 9.38rpx;
height: 268.13rpx;
border-left: solid 1.88rpx #ac8d5d;
border-right: solid 1.88rpx #ac8d5d;
border-top: solid 1.88rpx #ac8d5d;
border-bottom: 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_7 {
font-size: 28.13rpx;
}
.font_6 {
font-size: 26.25rpx;
font-family: STFangsong;
line-height: 18rpx;
color: #ff0000;
}
.text_8 {
-webkit-text-stroke: 1.88rpx #ff000040;
}
.view {
margin-top: 41.25rpx;
}
.text_9 {
line-height: 41.53rpx;
}
.equal-division_2 {
margin: 24.38rpx 30rpx 0 7.5rpx;
}
.group_4 {
margin-top: 30rpx;
}
.text_10 {
line-height: 42.75rpx;
}
.group_5 {
margin-right: 11.25rpx;
}
.list {
margin: 0 30rpx;
padding: 5.63rpx 0 39.38rpx;
background-color: #f7e7c6;
border-radius: 18.75rpx;
}
.list-item {
padding: 31.88rpx 30rpx 16.88rpx;
}
.text_11 {
line-height: 24.39rpx;
}
.font_7 {
font-size: 22.5rpx;
font-family: Open Sans;
line-height: 20.89rpx;
color: #6c6c6c;
}
.text_12 {
margin-left: 7.5rpx;
}
.font_8 {
font-size: 22.5rpx;
font-family: Open Sans;
line-height: 18rpx;
color: #6c6c6c;
}
.text_13 {
margin-left: 7.5rpx;
line-height: 16.54rpx;
}
.image_5 {
width: 178.13rpx;
height: 127.5rpx;
}
@import url(../../../common/css/global.css);
</style>
Reference in New Issue View Git Blame Copy Permalink