jiangchengfeiyi-xiaochengxu/pages/home/home.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">
            <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 items_2 = ref( [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;
  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://ide.code.fun/api/image?token=6711ccc71511d900114adddf&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_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://ide.code.fun/api/image?token=6711ccc71511d900114adddf&name=aa376a23521cc37d71891264189a3902.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>