提交打包

pages.json

@@ -386,7 +386,8 @@
 			"path" : "pages/vip/M_purchase",
 			"style" : 
 			{
-				"navigationBarTitleText" : "会员"
+				"navigationBarTitleText" : "会员",
+				"navigationStyle": "custom"
 			}
 		}
 	],

pages/index/index.scss

@@ -2,7 +2,7 @@
 
 	@font-face {
 	    font-family: 'CustomFont';
-	    src: url('@/static/fonts/阿里妈妈数黑体.otf') format('opentype');
+	    src: url('@/static/fonts/alibaba.otf') format('opentype');
 	    font-weight: normal;
 	    font-style: normal;
 	}

pages/index/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<view :style="{ height: windowHeight + 'px' }">
-		<view style="display: flex; justify-content: flex-end">
+<!-- 		<view style="display: flex; justify-content: flex-end">
 			<view class="view0 step1"></view>
 		</view>
 		<view class="view1 step2"></view>
@@ -10,7 +10,7 @@
 		<view class="view5 step6"></view>
 		<view style="display: flex; justify-content: flex-end">
 			<view class="view6 step7"></view>
-		</view>
+		</view> -->
 		<z-paging ref="paging"  v-model="dataList"  :auto="false" :style="{ height: windowHeight - 80 + 'px' }"
 			:show-scrollbar="false">
 			<template #top>

pages/vip/M_purchase.scss

@@ -1,125 +1,289 @@
-
+@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
 page {
-	background-color: #161616;
+  background-color: #f2f6f2;
 }
 .page {
-	background-color: #161616;
-	width: 100%;
-	height: 100vh;
-	background: url('http://c.yujianmate.com/images/v1/bg.png');
-	background-size: 750rpx 1624rpx;
-	background-repeat: repeat-y;
+  background-color: #eee;
+  width: 100%;
+  min-height: 100vh;
 }
+
 .topbg {
 }
 .topBody {
-	width:750rpx;
+  width: 750rpx;
+  .PageHeader {
+    background-color: #f2f6f2;
+
+    ::v-deep .uni-icons {
+      color: #1f1f1f !important;
+    }
+
+    .fa {
+      color: #1f1f1f;
+    }
+
+    .more-options {
+      position: relative;
+      display: inline-block;
+
+      .fa {
+        font-size: 40rpx;
+        padding: 0 20rpx;
+      }
+
+      .dropdown-menu {
+        position: absolute;
+        top: calc(100% + 10rpx);
+        right: 20rpx;
+        background-color: #ffffff;
+        border-radius: 20rpx;
+        padding: 0;
+        width: 200rpx;
+        box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
+        z-index: 100;
+        transform-origin: top right;
+        animation: dropdownAnimation 0.2s ease-out;
+
+        .dropdown-item {
+          padding: 24rpx 0;
+          color: #333333;
+          font-size: 28rpx;
+          position: relative;
+          text-align: center;
+
+          &:not(:last-child)::after {
+            content: "";
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            height: 1rpx;
+            background-color: #eeeeee;
+          }
+
+          &:active {
+            background-color: #f8f8f8;
+          }
+        }
+      }
+    }
+  }
+  .reserveASeat {
+    width: 100%;
+    background: transparent;
+    height: calc(var(--status-bar-height) + 90rpx);
+  }
+  .myGoldCoin-box {
+    width: 686rpx;
+    height: 196rpx;
+    background: linear-gradient(90deg, #1f1f1f 0%, #444444 100%);
+    border-radius: 20rpx;
+    margin: 0 auto;
+    padding-top: 50rpx;
+    padding-left: 40rpx;
+    box-sizing: border-box;
+    color: #ffffff;
+    font-size: 32rpx;
+    image {
+      width: 40rpx;
+      height: 40rpx;
+      margin-right: 10rpx;
+    }
+    .myGoldCoin-box-content {
+      display: flex;
+      align-items: center;
+      font-weight: 400;
+      font-size: 24px;
+      color: #acf934;
+      line-height: 1.5;
+    }
+  }
 }
+
+@keyframes dropdownAnimation {
+  0% {
+    opacity: 0;
+    transform: scale(0.95) translateY(-5rpx);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
 .header {
-	display: flex;flex-direction: row;justify-content: space-between;align-items: center;color:$title;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  color: $title;
 
-	.title {
-		font-size: 34rpx;
-	}
+  .title {
+    font-size: 34rpx;
+  }
 }
 .thread {
-	height:210rpx;
-	padding:50rpx;font-size: 52rpx;color:#6E6A6A;padding-top: 80rpx;
+  height: 210rpx;
+  padding: 50rpx;
+  font-size: 52rpx;
+  color: #6e6a6a;
+  padding-top: 80rpx;
 }
 .myinfo {
-	width: 720rpx;display:flex;flex-direction: column;margin:0rpx 30rpx 60rpx;justify-content: flex-start;
-	
-	.purchaseList {
-		display: flex;flex-direction: row;justify-content: center;align-items: center;
-		flex-wrap: wrap;
-
-		.item {
-			display: flex;justify-content: center;flex-direction: column;
-			border-radius: 28rpx 28rpx 28rpx 28rpx;
-			border: 2rpx solid #28292D;
-			width:214rpx;height:162rpx;
-			margin-right:24rpx;
-			margin-bottom:24rpx;
-			.num1 {
-				text-align: center;display: flex;flex-direction: column;justify-content: center;align-items: center;
-				.name {
-					font-size: 36rpx;color:#FFFFFF;margin-top: 12rpx;
-				}
-			}
-			.num2 {
-				text-align: center;display: flex;flex-direction: column;justify-content: center;align-items: center;
-				.name {
-					font-size: 28rpx;color:#999999;margin-top: 12rpx;
-				}
-			}
-		
-		}
-		.itemSel{
-			background: #321A23;
-			border-radius: 28rpx 28rpx 28rpx 28rpx;
-			border: 4rpx solid #FF3B85;
-			.num1 {
-				.name {
-					color:#FF3B85;
-				}
-			}
-			.num2{
-				.name {
-					color:#FFFFFF;
-				}
-			}
-		}
-			
-	}
-	.mingxiList {
-		display: flex;flex-direction: row;justify-content: space-between;align-items: center;
-		position: relative;
-		.left {
-			display: flex;flex-direction: row;justify-content: flex-start;align-items: center;
-			padding-left:10rpx;
-			padding-top: 20rpx;
-			.icon{
-				padding-left:5rpx;
-				width: 48rpx;
-			}
-			width: 750rpx;
-			height: 112rpx;
-			background: rgba(22,22,22,0);
-			border-radius: 0rpx 0rpx 0rpx 0rpx;
-		}
-		.right{
-			display: flex;flex-direction: row;justify-content: flex-start;align-items: center;
-			padding-right:40rpx;
-			padding-top: 20rpx;
-			.icon{
-				padding-left:5rpx;
-				height: 32rpx;
-			}
-		}
-	
-	}
-	.line{
-		width: 690rpx;
-		height: 2rpx;
-		margin-top: 20rpx;
-		background: #393939;
-		border-radius: 0rpx 0rpx 0rpx 0rpx;
-	}
-	
-	.btn_submit {
-		width: 660rpx;height: 96rpx;position: fixed;bottom:150rpx;left:45rpx;
-		background: linear-gradient( 142deg, #FF5967 0%, #FF2A95 100%);
-		border-radius: 28rpx;font-weight: bold;font-size: 32rpx;color: #FFFFFF;
-		display: flex;flex-direction: row;justify-content: center;align-items: center;
-	}
-	.bottom{
-		width: 660rpx;height: 96rpx;position: fixed;bottom:50rpx;left:45rpx;
-		display: flex;flex-direction: row;justify-content: center;align-items: center;
-	}
-	
-
-	
+  width: 720rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+
+  .purchaseList {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    padding: 0 32rpx;
+    gap: 18rpx;
+    .item {
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+
+      width: 218rpx;
+      height: 168rpx;
+      background: #ffffff;
+      border-radius: 20rpx;
+      border: 2px solid #fff;
+      .num1 {
+        text-align: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-weight: 400;
+        font-size: 40rpx;
+        color: rgba(32, 32, 32, 0.7);
+        .name {
+          font-size: 36rpx;
+          margin-top: 10rpx;
+        }
+        image {
+          width: 40rpx;
+          height: 40rpx;
+        }
+      }
+      .num2 {
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        .name {
+          font-size: 28rpx;
+          color: #999999;
+          margin-top: 12rpx;
+        }
+      }
+    }
+    .itemSel {
+      background: linear-gradient(
+        180deg,
+        #f0ffd9 0%,
+        rgba(240, 255, 217, 0) 99%
+      );
+      border: 2px solid #1f1f1f;
+      .num1 {
+        .name {
+          color: rgba(32, 32, 32, 1);
+        }
+      }
+      .num2 {
+        .name {
+          color: #999;
+        }
+      }
+    }
+  }
+  .jinchu {
+    padding-top: 30rpx;
+    padding-left: 32rpx;
+    font-size: 28rpx;
+    color: rgba(32, 32, 32, 1);
+  }
+  .mingxiList {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+    width: 686rpx;
+    height: 88rpx;
+    background: #ffffff;
+    border-radius: 20rpx;
+	margin: 0 auto;
+	margin-bottom: 10rpx;
+    .left {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      padding-left: 10rpx;
+      padding-top: 20rpx;
+      .icon {
+        padding-left: 5rpx;
+        width: 48rpx;
+      }
+      width: 750rpx;
+      height: 112rpx;
+      background: rgba(22, 22, 22, 0);
+      border-radius: 0rpx 0rpx 0rpx 0rpx;
+    }
+    .right {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      padding-right: 40rpx;
+      padding-top: 20rpx;
+      .icon {
+        padding-left: 5rpx;
+        height: 32rpx;
+      }
+    }
+  }
+  .line {
+    width: 690rpx;
+    height: 2rpx;
+    margin-top: 20rpx;
+    background: #393939;
+    border-radius: 0rpx 0rpx 0rpx 0rpx;
+  }
+
+  .btn_submit {
+    width: 660rpx;
+    height: 96rpx;
+    position: fixed;
+    bottom: 150rpx;
+    left: 45rpx;
+    background: linear-gradient(142deg, #ff5967 0%, #ff2a95 100%);
+    border-radius: 28rpx;
+    font-weight: bold;
+    font-size: 32rpx;
+    color: #ffffff;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+  .bottom {
+    width: 660rpx;
+    height: 96rpx;
+    position: fixed;
+    bottom: 50rpx;
+    left: 45rpx;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
 }
 .blankHeight {
-	height:100rpx;
-}
+  height: 100rpx;
+}

pages/vip/M_purchase.vue

@@ -1,232 +1,279 @@
 <template>
 	<view class="page">
 		<view class="topBody">
-			<view class="header">
+			<PageHeader title="会员" class="PageHeader">
+				<template slot="right">
+					<view class="more-options" @tap="toggleDropdown">
+						<text class="fa fa-ellipsis-h"></text>
+						<view class="dropdown-menu" v-if="showDropdown">
+							<view class="dropdown-item" @tap="handleOption('vipRecord')">购买记录记录</view>
+						</view>
+					</view>
+				</template>
+			</PageHeader>
+			<view class="reserveASeat"></view>
+
+			<view class="myGoldCoin-box">
+				<view>我的M币</view>
+				<view class="myGoldCoin-box-content">
+					<image src="../../static/icon/coin_m.png" mode="widthFix" />
+					<text>1000</text>
+				</view>
 			</view>
 			<view class="myinfo">
-
-				<view class="purchaseList" style="margin-top: 60rpx;">
-					<view class="item" :class="index==sel?'itemSel':''" v-for="(item,index) in list"
-						@click="selTA(item,index)">
+				<view class="purchaseList" style="margin-top: 60rpx">
+					<view class="item" :class="index == sel ? 'itemSel' : ''" v-for="(item, index) in list"
+						@click="selTA(item, index)" :key="index">
 						<view class="num1">
-							<view class="name">{{ item.num_gmm }}M{{$t('txt.币')}}</view>
+							<image src="../../static/icon/coin_m.png" mode="widthFix" />
+							<view class="name">{{ item.num_gmm }} </view>
 						</view>
 						<view class="num2">
-							<view class="name">{{ item.money }}{{$t('txt.￥')}}</view>
+							<view class="name">{{ item.money }}{{ $t("txt.￥") }}</view>
 						</view>
 					</view>
 				</view>
 
-				<view style="padding-top: 20rpx;margin-left: 10rpx;" class="jinchu">
-					<text style="color:#FFFFFF;font-size: 32rpx;font-weight: bold;">{{$t('txt.支付方式')}}</text>
+				<view class="jinchu">
+					<text>{{
+						$t("txt.支付方式")
+					}}</text>
 				</view>
 
 				<view class="mingxiList" @click="selPay('wechat')">
 					<view class="left">
 						<image class="icon" src="../../static/me/icon_wechat.png" mode="widthFix" />
-						<text style="font-size: 28rpx;margin-left: 20rpx;color: #ffffff;">{{$t('txt.微信支付')}}</text>
+						<text style="font-size: 28rpx; margin-left: 20rpx;  ">{{ $t("txt.微信支付") }}</text>
 					</view>
 					<view class="right">
-						<image class="icon"
-							:src="payType=='wechat'?'../../static/me/icon_select.png':'../../static/me/icon_unsel.png'"
-							mode="heightFix" />
+						<image class="icon" :src="payType == 'wechat'
+							? '../../static/icon/wd_icon_gouxuan04.png'
+							: '../../static/icon/wd_icon_gouxuan05.png'
+							" mode="heightFix" />
 					</view>
 				</view>
-				<!-- <view class="line"></view>
+				<!-- <view class="line"></view> -->
 				<view class="mingxiList" @click="selPay('alipay')">
 					<view class="left">
 						<image class="icon" src="../../static/me/icon_alipay.png" mode="widthFix" />
-						<text style="font-size: 28rpx;margin-left: 20rpx;color: #ffffff;">{{$t('txt.支付宝支付')}}</text>
+						<text style="font-size: 28rpx;margin-left: 20rpx; ">{{ $t('txt.支付宝支付') }}</text>
 					</view>
 					<view class="right">
 						<image class="icon"
-							:src="payType=='alipay'?'../../static/me/icon_select.png':'../../static/me/icon_unsel.png'"
+							:src="payType == 'alipay' ? '../../static/icon/wd_icon_gouxuan04.png' : '../../static/icon/wd_icon_gouxuan05.png'"
 							mode="heightFix" />
 					</view>
-				</view -->>
-				<view class="line"></view>
-				<view class="btn_submit" @click="submitData">{{$t('txt.立即支付')}}{{$t('txt.￥')}}{{money}}</view>
+				</view>
+				<!-- <view class="line"></view> -->
+				<view class="btn_submit" @click="submitData">{{ $t("txt.立即支付") }}{{ $t("txt.￥") }}{{ money }}</view>
 				<view class="bottom" @click="goPage('/pages/AboutUs/pay_xy')">
-					<text style="font-size: 28rpx;color: #FFFFFF;">{{$t('txt.点击支付即代表同意')}}</text>
-					<text style="font-size: 28rpx;color: #FF2A95;">{{$t('txt.M币充值协议')}}</text>
+					<text style="font-size: 28rpx; color: #ffffff">{{
+						$t("txt.点击支付即代表同意")
+					}}</text>
+					<text style="font-size: 28rpx; color: #ff2a95">{{
+						$t("txt.M币充值协议")
+					}}</text>
 				</view>
 			</view>
 
-
-
 			<view class="blankHeight"></view>
 		</view>
 
-
 		<!-- 提示框 -->
 		<DialogBox ref="DialogBox"></DialogBox>
 	</view>
 </template>
 
 <script>
-	export default {
-		components: {},
-		data() {
-			return {
-				title: '',
-				sel: 1,
-				payType: 'wechat',
-				list: [],
-				money: 0,
-				tid: 0,
-				linkid: '',
-
+export default {
+	components: {},
+	data() {
+		return {
+			title: "",
+			sel: 1,
+			payType: "wechat",
+			list: [],
+			money: 0,
+			tid: 0,
+			linkid: "",
+			showDropdown: false,
+		};
+	},
+	onLoad() {
+		// setTimeout(function() {
+		// 	uni.setNavigationBarColor({
+		// 		frontColor: '#ffffff',
+		// 		backgroundColor: '#00000000',
+		// 		animation: {
+		// 			duration: 400,
+		// 			timingFunc: 'easeIn'
+		// 		}
+		// 	})
+		// }, 200);
+	},
+	onShow() {
+		this.loadData();
+		let that = this;
+	},
+	methods: {
+		onBack() { },
+		goPage(page) {
+			uni.navigateTo({
+				url: page,
+			});
+		},
+		selTA(item, se) {
+			this.tid = item.id;
+			this.sel = se;
+			if (this.list != null && this.list != undefined) {
+				this.money = this.list[se]["money"];
 			}
 		},
-		onLoad() {
-			// setTimeout(function() {
-			// 	uni.setNavigationBarColor({
-			// 		frontColor: '#ffffff',
-			// 		backgroundColor: '#00000000',
-			// 		animation: {
-			// 			duration: 400,
-			// 			timingFunc: 'easeIn'
-			// 		}
-			// 	})
-			// }, 200);
+		selPay(se) {
+			this.payType = se;
 		},
-		onShow() {
-			this.loadData();
-			let that = this;
+		chkSel() {
+			if (this.sel == 1) {
+				this.sel = 0;
+			} else {
+				this.sel = 1;
+			}
 		},
-		methods: {
-			onBack() {},
-			goPage(page) {
-				uni.navigateTo({
-					url: page,
-				})
-			},
-			selTA(item, se) {
-				this.tid = item.id;
-				this.sel = se;
-				if (this.list != null && this.list != undefined) {
-					this.money = this.list[se]['money'];
-				}
-
-			},
-			selPay(se) {
-				this.payType = se;
-			},
-			chkSel() {
-				if (this.sel == 1) {
-					this.sel = 0;
-				} else {
-					this.sel = 1;
-				}
-			},
-			submitData() {
-		
-				let that = this;
-				uni.request({
-					url: this.$apiHost + '/Order/submit', //仅为示例，并非真实接口地址。
-					data: {
-						uuid: getApp().globalData.uuid,
-						product_id: this.tid,
-						type: 'buyM',
-						payType: 'wechat'
-					},
-					header: {
-						'content-type': 'application/json' //自定义请求头信息
-					},
-					success: (res) => {
-						console.log("res-pay", res.data);
-						if (res.data.success == 'yes') {
-							this.linkid = res.data.linkid;
+		submitData() {
+			let that = this;
+			uni.request({
+				url: this.$apiHost + "/Order/submit", //仅为示例，并非真实接口地址。
+				data: {
+					uuid: getApp().globalData.uuid,
+					product_id: this.tid,
+					type: "buyM",
+					payType: "wechat",
+				},
+				header: {
+					"content-type": "application/json", //自定义请求头信息
+				},
+				success: (res) => {
+					console.log("res-pay", res.data);
+					if (res.data.success == "yes") {
+						this.linkid = res.data.linkid;
 
-							uni.requestPayment({
-								"provider": "wxpay",
-								"orderInfo": res.data.wepay,
-								success(res) {
-									console.log("res-suu:", res)
-									setTimeout(function() {
-										that.showPayCall();
-									}, 1000);
-								},
-								fail(e) {
-									console.log("fail", e);
-								}
-							});
-						} else {
-							uni.showToast({
-								title: '创建订单失败，请联系客服',
-								icon: "error"
-							});
-						}
+						uni.requestPayment({
+							provider: "wxpay",
+							orderInfo: res.data.wepay,
+							success(res) {
+								console.log("res-suu:", res);
+								setTimeout(function () {
+									that.showPayCall();
+								}, 1000);
+							},
+							fail(e) {
+								console.log("fail", e);
+							},
+						});
+					} else {
+						uni.showToast({
+							title: "创建订单失败，请联系客服",
+							icon: "error",
+						});
 					}
-				});
-			},
-			showPayCall() {
-				let that = this;
-				this.$refs['DialogBox'].confirm({
-					title: '提示',
-					content: '我已经支付完成',
-					DialogType: 'inquiry',
-					btn1: '否',
-					btn2: '是',
-					animation: 0
-				}).then((res) => {
+				},
+			});
+		},
+		showPayCall() {
+			let that = this;
+			this.$refs["DialogBox"]
+				.confirm({
+					title: "提示",
+					content: "我已经支付完成",
+					DialogType: "inquiry",
+					btn1: "否",
+					btn2: "是",
+					animation: 0,
+				})
+				.then((res) => {
 					uni.request({
 						url: this.$apiHost + "/Order/getstatus",
 						data: {
 							uuid: getApp().globalData.uuid,
-							linkid: that.linkid
+							linkid: that.linkid,
 						},
 						header: {
-							"content-type": "application/json"
+							"content-type": "application/json",
 						},
 						success: (res) => {
 							if (res.data.success == "yes") {
 								uni.showToast({
-									title: '充值成功',
-									icon: "none"
+									title: "充值成功",
+									icon: "none",
 								});
 							} else {
 								uni.showToast({
-									title: '还未检测到充值状态，请稍后再试',
-									icon: "none"
+									title: "还未检测到充值状态，请稍后再试",
+									icon: "none",
 								});
-								setTimeout(function() {
+								setTimeout(function () {
 									that.showPayCall();
 								}, 1000);
 							}
 						},
-						complete: (com) => {},
+						complete: (com) => { },
 					});
-				})
-			},
-			loadData() {
-				var offset = (this.page - 1) * 20;
-				uni.request({
-					url: this.$apiHost + '/User/getCzList',
-					data: {
-						uuid: getApp().globalData.uuid
-					},
-					header: {
-						'content-type': 'application/json'
-					},
-					success: (res) => {
-						console.log("res", res.data)
-						this.num = res.data.num;
-						if (res.data.list != null && res.data.list != undefined) {
-							this.list = res.data.list;
-							this.tid = this.list[1]['id'];
-							this.sel = 1;
-							this.money = this.list[1]['money'];
-						}
-					}
 				});
-
-			},
-
-		}
-	}
+		},
+		loadData() {
+			var offset = (this.page - 1) * 20;
+			uni.request({
+				url: this.$apiHost + "/User/getCzList",
+				data: {
+					uuid: getApp().globalData.uuid,
+				},
+				header: {
+					"content-type": "application/json",
+				},
+				success: (res) => {
+					console.log("res", res.data);
+					this.num = res.data.num;
+					if (res.data.list != null && res.data.list != undefined) {
+						this.list = res.data.list;
+						this.tid = this.list[1]["id"];
+						this.sel = 1;
+						this.money = this.list[1]["money"];
+					}
+				},
+			});
+		},
+		toggleDropdown() {
+			this.showDropdown = !this.showDropdown;
+		},
+		handleOption(type) {
+			this.showDropdown = false;
+			switch (type) {
+				case 'vipRecord':
+					uni.navigateTo({
+						url: '/pages/vip/record'
+					});
+					break;
+				case 'contact':
+					uni.navigateTo({
+						url: '/pages/contact/index'
+					});
+					break;
+				case 'help':
+					uni.navigateTo({
+						url: '/pages/help/index'
+					});
+					break;
+				case 'feedback':
+					uni.navigateTo({
+						url: '/pages/feedback/index'
+					});
+					break;
+			}
+		},
+	},
+};
 </script>
 
 <style scoped lang="scss">
-	@import 'M_purchase.scss';
-</style>
+@import "M_purchase.scss";
+</style>

style/FontStyle.css

@@ -1,6 +1,6 @@
 @font-face {
     font-family: 'CustomFont';
-    src: url('@/static/fonts/阿里妈妈数黑体.otf') format('opentype');
+    src: url('@/static/fonts/alibaba.otf') format('opentype');
     font-weight: normal;
     font-style: normal;
 }