jiangchengfeiyi-xiaochengxu/pages/home/home.vue

<template>
<view class="flex-col justify-start relative page">
  <view class="section"></view>
  <image class="image pos" src="https://ide.code.fun/api/image?token=675941ee797f850011f20adf&name=flower.png" />
  <text class="text pos_6">限定手制|非量售卖</text>
  <text class="font pos_2">匠</text>
  <text class="font pos_3">承</text>
  <text class="font pos_4">非</text>
  <text class="font pos_5">遗</text>
  <view class="grid pos_7">
    <view class="flex-row grid-item" @click="jump_xiezhen">
      <image
        class="shrink-0 self-center image_2"
        src="https://ide.code.fun/api/image?token=675941ee797f850011f20adf&name=firsticon.png"
      />
      <view class="ml-4 flex-col items-center flex-1 self-start group">
        <text class="font_2 text_2">写真预约</text>
        <text class="mt-14 font_3 text_3">伊人摸样，丹青绘画</text>
      </view>
    </view>
    <view class="flex-row items-center grid-item_2" @click="jump_feiyi">
      <image
        class="shrink-0 image_3"
        src="https://ide.code.fun/api/image?token=675941ee797f850011f20adf&name=secondicon.png"
      />
      <view class="flex-col items-center flex-1 ml-7">
        <text class="font_2">手作材包</text>
        <text class="mt-14 font_3">朴物良社，匠心手作</text>
      </view>
    </view>
    <view class="flex-row grid-item_3" @click="jump_store">
      <image
        class="shrink-0 self-center image_5"
        src="https://ide.code.fun/api/image?token=675941ee797f850011f20adf&name=thirdicon1.png"
      />
      <view class="flex-col items-center flex-1 self-start group_2 ml-7">
        <text class="font_2 text_5">推荐商品</text>
        <text class="mt-12 font_3 text_6">伊人摸样，丹青绘画</text>
      </view>
    </view>
    <view class="flex-row relative grid-item_4">
      <image
        class="shrink-0 self-center image_4"
        src="https://ide.code.fun/api/image?token=675941ee797f850011f20adf&name=fourthicon.png"
      />
      <text class="self-start font_2 text_4">活动咨询</text>
      <text class="font_3 pos_8">朴物良社，匠心手作</text>
    </view>
  </view>
</view>
</template>

<script setup>
import {ref} from 'vue'
import { baseUrl, testUrl , suiUrl} from '@/api/request';
import { onShow } from "@dcloudio/uni-app";
//变量
const items = ref( [null, null, null])
const items_1 = ref( [null, null, null])
onShow(() => {
	uni.removeStorageSync('businessId')
	getMyUser()
})
const getMyUser = async () =>{
	const res = await uni.request({
		url: baseUrl + '/user/get/login',
		method: 'GET',
		header: {
			// 读取JSESSIONID
			'cookie': wx.getStorageSync("cookie")
		}
	})
	// console.log('获取用户信息==>',res.data)
	if( res.data.code === 40100 ) {
		uni.navigateTo({
			url: '/pages/login/login'
		})
		uni.showToast({
			icon: 'loading',
			title: "请登录"
		})
	}
}
const jump_xiezhen =()=>{
	uni.navigateTo({
		url: '../../pages/booking/respectable/respectable'
	})
}
const jump_feiyi =()=>{   //跳转非遗工坊
	uni.navigateTo({
		url: '/pages/workshop/index/index'
	})
}
const jump_store =()=>{
	uni.switchTab({
		url: '/pages/store-home/main/main'
	})
}
</script>

<style lang="scss" scoped>
.ml-7 {
  margin-left: 13.13rpx;
}
.page {
  background-image: url('https://ide.code.fun/api/image?token=675941ee797f850011f20adf&name=background.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.section {
  background-image: url('https://ide.code.fun/api/image?token=675941ee797f850011f20adf&name=background.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 750rpx;
  height: 1415.63rpx;
}
.image {
  opacity: 0.35;
  width: 96vw;
  height: 137.5vw;
}
.pos {
  position: absolute;
  left: 0;
  right: 30rpx;
  top: 0;
}
.text {
  color: #9d2624;
  font-size: 37.5rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 36.92rpx;
}
.pos_6 {
  position: absolute;
  left: 50%;
  bottom: 435.51rpx;
  transform: translateX(-50%);
}
.font {
  font-size: 168.75rpx;
  font-family: Sun Yat-sen Hsingshu;
  line-height: 202.5rpx;
  color: #c35c5d;
}
.pos_2 {
  position: absolute;
  right: 156.19rpx;
  top: 71.25rpx;
}
.pos_3 {
  position: absolute;
  right: 114.81rpx;
  top: 273.43rpx;
}
.pos_4 {
  position: absolute;
  right: 165.41rpx;
  top: 474.62rpx;
}
.pos_5 {
  position: absolute;
  right: 114.81rpx;
  bottom: 543.26rpx;
}
.grid {
  width: 646.88rpx;
  height: 305.63rpx;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 56.38rpx;
  column-gap: 80.76rpx;
}
.pos_7 {
  position: absolute;
  left: 45rpx;
  top: 1059.38rpx;
}
.grid-item {
  padding: 22.5rpx 11.25rpx 22.5rpx 18.75rpx;
  background-color: #ffffff;
  border-radius: 46.88rpx;
}
.image_2 {
  width: 73.13rpx;
  height: 78.75rpx;
}
.group {
  margin-top: 11.25rpx;
}
.font_2 {
  font-size: 28.13rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 26.47rpx;
  color: #000000;
}
.text_2 {
  line-height: 27.36rpx;
}
.grid-item_2 {
  padding: 22.5rpx 3.75rpx 22.5rpx 15rpx;
  background-color: #ffffff;
  border-radius: 46.88rpx;
}
.image_3 {
  width: 76.88rpx;
  height: 76.88rpx;
}
.grid-item_3 {
  padding: 22.5rpx 3.75rpx 22.5rpx 11.25rpx;
  background-color: #ffffff;
  border-radius: 46.88rpx;
}
.image_5 {
  width: 80.63rpx;
  height: 78.75rpx;
}
.group_2 {
  margin-top: 15rpx;
}
.text_5 {
  line-height: 27.02rpx;
}
.font_3 {
  font-size: 18.75rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 17.29rpx;
  color: #faddde;
}
.text_3 {
  line-height: 18.09rpx;
}
.text_6 {
  line-height: 18.09rpx;
}
.grid-item_4 {
  padding: 16.88rpx 9.38rpx;
  background-color: #ffffff;
  border-radius: 46.88rpx;
  width: 281.25rpx;
}
.image_4 {
  width: 103.13rpx;
  height: 91.88rpx;
}
.text_4 {
  margin-left: 18.75rpx;
  margin-top: 15rpx;
}
.pos_8 {
  position: absolute;
  right: 7.14rpx;
  bottom: 24.28rpx;
}
@import url(../../common/css/global.css);

</style>