jiangchengfeiyi-xiaochengxu/pages/mine/main/main.vue

<template>
	<view class="flex-col page">
	  <view class="flex-col group">
	    <view class="flex-row items-center group_2">
	      <image
	        class="image"
	        src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FtiKFGDAi-avator.png"
	      />
	      <view class="ml-20 flex-col items-start flex-1">
	        <text class="text">微信用户</text>
	        <text class="mt-18 font text_2">剩余积分：40</text>
	      </view>
	    </view>
	    <view class="flex-row equal-division">
	      <view class="flex-col items-center" @click="goto">
	        <image
	          class="shrink-0 image_2"
	          src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FjqkEyOpY-totalorder.png"
	        />
	        <text class="font text_3">总订单</text>
	      </view>
	      <view class="flex-col items-center ml-1">
	        <image
	          class="shrink-0 image_2"
	          src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FEzgKLIBS-waitproduct.png"
	        />
	        <text class="font text_5">待发货</text>
	      </view>
	      <view class="flex-col items-center ml-1">
	        <image
	          class="shrink-0 image_2"
	          src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FVWTrHegX-waitpay.png"
	        />
	        <text class="font text_4">待付款</text>
	      </view>
	      <view class="flex-col items-center ml-1">
	        <image
	          class="shrink-0 image_2"
	          src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FWAdobYmD-waitshouhou.png"
	        />
	        <text class="font text_6">待收货</text>
	      </view>
	      <view class="flex-col items-center ml-1">
	        <image
	          class="shrink-0 image_2"
	          src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FGEFKFVXw-shouhou.png"
	        />
	        <text class="font text_7">退款/售后</text>
	      </view>
	    </view>
	  </view>
	  <view class="flex-col mt-37">
	    <view class="flex-col group_3">
	      <view class="flex-row justify-between relative">
	        <image
	          class="image_3"
	          src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FSJZTOttL-address.png"
	        />
	        <image
	          class="self-start image_4 image_5"
	          src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FwQgycnra-rush.png"
	        />
	        <text class="font_2 text_8 pos">地 址 列 表</text>
	        <view class="divider pos_2"></view>
	      </view>
	      <view class="flex-row justify-between relative" @click="goToText">
	        <image
	          class="image_6"
	          src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FejVXliLM-contact.png"
	        />
	        <image
	          class="self-start image_4 image_7"
	          src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FwQgycnra-rush.png"
	        />
	        <text class="font_2 pos_3">联系人列表</text>
	        <view class="divider pos_4"></view>
	      </view>
	    </view>
	    <view class="flex-row justify-between group_4">
	      <view class="flex-row items-center">
	        <image
	          class="shrink-0 image_8"
	          src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FOfemexvK-booking.png"
	        />
	        <text class="font_2 text_9">我 的 预 约</text>
	      </view>
	      <image
	        class="self-start image_4 image_9"
	        src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FwQgycnra-rush.png"
	      />
	    </view>
	    <view class="flex-col group_5">
	      <view class="divider view"></view>
	      <view class="flex-row justify-between items-center group_6">
	        <view class="flex-row items-center">
	          <image
	            class="shrink-0 image_10"
	            src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FqihgypDY-coupon.png"
	          />
	          <text class="font_2">我的优惠券</text>
	        </view>
	        <image
	          class="image_4 image_11"
	          src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FwQgycnra-rush.png"
	        />
	      </view>
	      <view class="divider view_2"></view>
	      <view class="flex-row justify-between group_7">
	        <view class="flex-row self-center">
	          <view class="flex-row shrink-0">
	            <image
	              class="shrink-0 image_12"
	              src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FlGcdVAji-setting.png"
	            />
	            <text class="ml-10 self-start font_3 text_10">设</text>
	          </view>
	          <text class="ml-60 self-start font_3 text_11">置</text>
	        </view>
	        <image
	          class="self-start image_4 image_13"
	          src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FwQgycnra-rush.png"
	        />
	      </view>
	    </view>
	  </view>
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { onShow,onLoad } from "@dcloudio/uni-app";
onMounted(()=>{
	getFonts()   //启动使从服务器下载字体
})
const goto = () => {  //跳转到订单
	uni.navigateTo({
		url: "/pages/mine/mineorders/mineorders"
	})
}
const goToText = () => {  //跳转到联系人信息
	uni.navigateTo({
		url: '/pages/mine/Contact/Contact'
	})
}
const goTo = ()=>{  //跳转到预约
	uni.navigateTo({
		url: '/pages/mine/bookings/booking'
	})
}
const getFonts =()=>{ //导入字体
	uni.loadFontFace({
		family: 'FangZhengFonts',
		source: `url("https://carbon2.obs.cn-north-4.myhuaweicloud.com/fonts/FangZhengFonts.TTF")`,
		success:(res) =>{
			console.log('success',res);
		},
		fail:(err) => {
			console.log('err',err);
		}
	})
}
</script>

<style lang="scss" scoped>
.ml-1 {
  margin-left: 1.88rpx;
}
.mt-37 {
  margin-top: 69.38rpx;
}
.page {
  padding: 135rpx 0 211.88rpx;
  background-color: #ffffff00;
	background-image: url('https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FQfLHXSAU-feiyigongfangbeijin.png');
	background-size: 100% 100%;
  width: 100%;
  overflow-y: hidden;
  overflow-x: hidden;
  height: 100vh;
}
.group {
  padding: 0 7.5rpx;
}
.group_2 {
  margin: 0 30rpx;
  padding: 0 7.5rpx 37.5rpx;
  border-bottom: solid 0.94rpx #aeaeae;
}
.image {
  border-radius: 50%;
  width: 150rpx;
  height: 151.88rpx;
}
.text {
  color: #000000;
  font-size: 45rpx;
  font-family: FangZhengFonts;
  line-height: 40.61rpx;
}
.font {
  font-size: 28.13rpx;
  font-family: FangZhengFonts;
  line-height: 27.02rpx;
  color: #000000;
}
.text_2 {
  margin-left: 7.5rpx;
  font-size: 30rpx;
  line-height: 27.9rpx;
}
.equal-division {
  margin-right: 5.63rpx;
}
.image_2 {
  width: 144rpx;
  height: 144rpx;
}
.text_3 {
  margin-top: -7.5rpx;
}
.text_5 {
  margin-top: -7.5rpx;
}
.text_4 {
  margin-top: -7.5rpx;
}
.text_6 {
  margin-top: -7.5rpx;
}
.text_7 {
  margin-top: -7.5rpx;
}
.group_3 {
  padding: 0 35.63rpx;
}
.image_3 {
  width: 120rpx;
  height: 123.75rpx;
}
.image_4 {
  width: 39.38rpx;
  height: 41.25rpx;
}
.image_5 {
  margin-right: 31.88rpx;
  margin-top: 52.5rpx;
}
.font_2 {
  font-size: 37.5rpx;
  font-family: FangZhengFonts;
  line-height: 36.47rpx;
  color: #000000;
}
.text_8 {
  line-height: 35.74rpx;
}
.pos {
  position: absolute;
  left: 121.76rpx;
  top: 50%;
  transform: translateY(-50%);
}
.divider {
  background-color: #aeaeae;
  height: 0.94rpx;
}
.pos_2 {
  position: absolute;
  left: 3.75rpx;
  right: 37.5rpx;
  top: 117.19rpx;
}
.image_6 {
  width: 120rpx;
  height: 125.63rpx;
}
.image_7 {
  margin-right: 31.88rpx;
  margin-top: 52.5rpx;
}
.pos_3 {
  position: absolute;
  left: 116.72rpx;
  top: 50%;
  transform: translateY(-50%);
}
.pos_4 {
  position: absolute;
  left: 3.75rpx;
  right: 37.5rpx;
  top: 124.69rpx;
}
.group_4 {
	margin-top: 4rpx;
  padding: 0 28.13rpx 11.25rpx;
}
.image_8 {
  width: 133.13rpx;
  height: 114.38rpx;
}
.text_9 {
	padding-top: 20rpx;
  margin-left: -7.5rpx;
  line-height: 33.99rpx;
}
.image_9 {
  margin-right: 41.25rpx;
  margin-top: 45.5rpx;
}
.group_5 {
  padding: 0 39.38rpx;
}
.view {
  margin-right: 33.75rpx;
}
.group_6 {
  padding: 22.5rpx 0 7.5rpx;
}
.image_10 {
  width: 118.13rpx;
  height: 101.25rpx;
}
.image_11 {
  margin-right: 28.13rpx;
}
.view_2 {
  margin-right: 31.88rpx;
}
.group_7 {
  padding: 28.13rpx 7.5rpx 0;
}
.image_12 {
  width: 91.88rpx;
  height: 91.88rpx;
}
.font_3 {
  font-size: 37.5rpx;
  font-family: FangZhengFonts;
  line-height: 30.47rpx;
  color: #000000;
}
.text_10 {
  margin-top: 26.25rpx;
}
.text_11 {
  margin-top: 22.5rpx;
}
.image_13 {
  margin-right: 20.63rpx;
  margin-top: 16.88rpx;
}
@import url(../../../common/css/global.css);
</style>