完成我的页面主要功能 部分设置页面

components/PageHeader/PageHeader.vue

@@ -0,0 +1,88 @@
+<template>
+  <view class="page-header">
+    <view class="status-bar"></view>
+    <view class="navbar" :style=" cssStyle ">
+      <view class="navbar-left">
+        <view class="back-icon" @click="goBack">
+          <uni-icons type="left" size="20" color="#000000"></uni-icons>
+        </view>
+      </view>
+      <view class="navbar-title">
+        {{ title }}
+        <slot name="center"></slot>
+      </view>
+      <view class="navbar-right">
+        <slot name="right"></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'PageHeader',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    cssStyle:{
+      type: Object,
+      default: () => ({})
+    }
+  },
+  methods: {
+    goBack() {
+      uni.navigateBack({
+        delta: 1
+      });
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 100;
+  background-color: #ffffff;
+}
+
+.status-bar {
+  height: var(--status-bar-height);
+}
+
+.navbar {
+  display: flex;
+  align-items: center;
+  height: 90rpx;
+  padding: 0 30rpx;
+}
+
+.navbar-left {
+  width: 120rpx;
+}
+
+.navbar-title {
+  flex: 1;
+  text-align: center;
+  font-size: 36rpx;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.navbar-right {
+  width: 120rpx;
+  text-align: right;
+}
+
+.back-icon {
+  width: 40rpx;
+  height: 40rpx;
+}
+</style>

components/WorkItem/WorkItem.vue

@@ -0,0 +1,103 @@
+<template>
+	<view class="item" @click="handleClick">
+		<view v-if="item.task_type == 1" class="icon-box">
+			<image :class="'icon' + item.images" :src="item.result_images||item.images || item.img_url || item.url || '../../static/logo.png'" mode="widthFix" />
+		</view>
+		<view v-if="item.task_type == 2" :class="'icon-box icon-box' + item.task_type">
+			<view>
+				<image :class="'icon' + item.images" :src="item.result_images||item.images || item.img_url || item.url || '../../static/logo.png'" mode="widthFix" />
+			</view>
+		</view>
+		<view class="name one-omit">{{ item.title || item.description || "作品" + index }}</view>
+		<view class="secrecy" v-if="secrecy && item.status!=1">
+			<image src="@/static/icon/wd_icon_suo.png"></image>
+			仅个人可见
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	props: {
+		item: {
+			type: Object,
+			required: true
+		},
+		secrecy:{
+			type: Boolean,
+			default: false
+		}, 
+		
+	},
+	methods: {
+		handleClick() {
+			this.$emit('click', this.item);
+		}
+	}
+};
+</script>
+
+<style scoped lang="scss">
+ .item {
+      width: 346rpx;
+      height: 520rpx;
+      margin-bottom: 30rpx;
+      background: #fff;
+      overflow: hidden;
+      position: relative;
+      left: 0;
+      top: 0;
+      .secrecy {
+        position: absolute;
+        left: 14rpx;
+        top: 14rpx;
+        background: rgba(0, 0, 0, 0.3);
+        border-radius: 24rpx;
+        font-family: "PingFang SC-Medium";
+        font-size: 20rpx;
+        font-weight: 400;
+        color: #fff;
+        display: flex;
+        align-items: center;
+		justify-content: center;
+		padding: 3rpx 12rpx;
+
+        image {
+          width: 24rpx;
+          height: 24rpx;
+        }
+      }
+      .icon-box {
+        width: 346rpx;
+        height: 468rpx;
+        padding: 28rpx 20rpx;
+        box-sizing: border-box;
+        background-color: #f8f9fa;
+        margin-bottom: 12rpx;
+        .icon {
+        }
+        &.icon-box2 {
+          > view {
+            width: 346rpx;
+            height: 346rpx;
+            overflow: hidden;
+          }
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          padding: 0;
+          justify-content: center;
+        }
+      }
+      .name {
+        font-size: 28rpx;
+        color: #1a4d2e;
+        font-family: "PingFang SC-Medium";
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+	
+</style>

pages.json

@@ -141,7 +141,8 @@
 			"path": "pages/my/editInfo",
 			"style": {
 				"navigationBarTitleText": "基本资料",
-				"navigationBarBackgroundColor": "#ffffff"
+				"navigationBarBackgroundColor": "#ffffff",
+				"navigationStyle": "custom"
 			}
 		}, {
 			"path": "pages/my/myArticle",
@@ -194,13 +195,13 @@
 			"path": "pages/my/security",
 			"style": {
 				"navigationBarTitleText": "账户与安全",
-				"navigationBarBackgroundColor": "#ffffff"
+				"navigationBarBackgroundColor": "#F2F6F2"
 			}
 		}, {
 			"path": "pages/my/setting",
 			"style": {
 				"navigationBarTitleText": "设置",
-				"navigationBarBackgroundColor": "#ffffff"
+				"navigationBarBackgroundColor": "#F2F6F2"
 			}
 		}, {
 			"path": "pages/my/job",
@@ -236,7 +237,8 @@
 			"path": "pages/my/follow",
 			"style": {
 				"navigationBarTitleText": "关注",
-				"navigationBarBackgroundColor": "#ffffff"
+				"navigationBarBackgroundColor": "#ffffff",
+				"navigationStyle": "custom"
 			}
 		}, {
 			"path": "pages/makedetail/makeImgDetail",

pages/index/index.vue

@@ -17,11 +17,13 @@
 				<page-navbar>
 					<template #navCenter>
 						<view class="top" style="  display: flex;">
+							<!-- 手动选择城市功能隐藏 -->
+							<!-- <view class="topBox" @click="lhSelectCityFun"> -->
 							<view class="topBox" @click="lhSelectCityFun">
-								<text style="margin-left: 10rpx; font-size: 44rpx;font-weight: 600;"> {{currentCity}}
+								<text style="margin-left: 10rpx;margin-right: 20rpx;  font-size: 44rpx;font-weight: 600;"> {{currentCity}}
 								</text>
-								<image src="@/static/home/home-bom.png"
-									style="width: 36rpx; height: 36rpx;margin-left: 15rpx;margin-right: 30rpx;"></image>
+								<!-- <image src="@/static/home/home-bom.png"
+									style="width: 36rpx; height: 36rpx;margin-left: 15rpx;margin-right: 30rpx;"></image> -->
 							</view>
 							<view class="weather">
 								<p>{{weather.weather}}<i :class="'qi-'+ weather.icon"></i>️{{weather.temp}}</p>

pages/my/editInfo.vue

@@ -1,9 +1,19 @@
 <template>
 	<view class="page">
+		<PageHeader title="" class="PageHeader"  > 
+			<template slot="center">
+				基本资料
+			</template>
+		</PageHeader>
+		<!-- <view  style="height: 90rpx;"></view> -->
 		<view class="list_info">
 			<view class="bcenter">
 				<view class="avator" @click="upload">
-					<image class="img" :src="avator" mode="aspectFill" />
+					<!-- <image class="img" :src="avator" mode="aspectFill" /> -->
+					<CircleAvatar
+                  class="avator"
+                  :src="avator" style="width: 200rpx; height: 200rpx;"
+                ></CircleAvatar>
 					<image class="photo" src="../../static/me/photo.png" mode="widthFix" />
 				</view>
 			</view>
@@ -47,18 +57,18 @@
 					<text class="label">星座</text>
 					<view class="content">
 						<input type="text" :value="xinzuo_sel" disabled="true" />
-						<image class="arrow" src="../../static/me/arrow_right_gray.png" mode="widthFix" />
+						<!-- <image class="arrow" src="../../static/me/arrow_right_gray.png" mode="widthFix" /> -->
 					</view>
 				</view>
 			</view>
 			<view class="section_title">个性标签</view>
 			<view class="info_card">
 				<view class="item_tag">
-					<view class="tag" v-for="(item,index) in sel_tags">
-						{{item}}
+					<view class="tag" v-for="(item, index) in sel_tags" :key = "index">
+						{{ item }}
 						<image class="close" src="../../static/me/close.png" mode="widthFix" @click="delTag(item)" />
 					</view>
-					<view class="addNew" @click="showPop = true;">添加+</view>
+					<view class="addNew" @click="showPop = true;">+ 添加</view>
 				</view>
 			</view>
 			<view class="blankHeight"></view>
@@ -72,9 +82,9 @@
 				<view class="name">你的兴趣爱好是？</view>
 				<view class="desc">提示：最多选择10个兴趣爱好标签</view>
 				<view class="item_tag">
-					<view @tap.stop="chkTag(item)" class="tag" :class="selTags(item)?'active':''"
-						v-for="(item,index) in list_tag">
-						{{item}}
+					<view @tap.stop="chkTag(item)" class="tag" :class=" selTags(item) ? 'active' : ''"
+						v-for="(item, index) in list_tag" :key="index">
+						{{ item }} 
 					</view>
 				</view>
 			</view>
@@ -94,294 +104,296 @@
 </template>
 
 <script>
-	import {
-		requestAndroidPermission,
-		gotoAppPermissionSetting
-	} from '../index/permission.js'
-	export default {
-		components: {},
-		data() {
-			return {
-				showRights: false,
-				title: '',
-				sel: 1,
-				info: {},
-				showPop: false,
-				nickname: '',
-				content: '',
-				sex: 1,
-				age: 18,
-				height: 160,
-				weight: 50,
-				avator: '../../static/me/avator.png',
-				ziye: '',
-				qianmin: '',
+import {
+	requestAndroidPermission,
+	gotoAppPermissionSetting
+} from '../index/permission.js'
+import PageHeader from '@/components/PageHeader/PageHeader.vue';
+import CircleAvatar from '@/components/CircleAvatar/CircleAvatar.vue';
+export default {
+	components: {PageHeader,CircleAvatar},
+	data() {
+		return {
+			showRights: false,
+			title: '',
+			sel: 1,
+			info: {},
+			showPop: false,
+			nickname: '',
+			content: '',
+			sex: 1,
+			age: 18,
+			height: 160,
+			weight: 50,
+			avator: '../../static/me/avator.png',
+			ziye: '',
+			qianmin: '',
 
-				xinzuo_sel: '',
-				xinzuo: ['水瓶座', '双鱼座', '白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座'],
+			xinzuo_sel: '',
+			xinzuo: ['水瓶座', '双鱼座', '白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座'],
 
-				list_tag: [],
-				sel_tags: [],
-				sexText: '',
-				birthday: '',
-				sexOptions: ['男', '女', '其他'],
-				endDate: new Date().toISOString().split('T')[0]
+			list_tag: [],
+			sel_tags: [],
+			sexText: '',
+			birthday: '',
+			sexOptions: ['男', '女', '其他'],
+			endDate: new Date().toISOString().split('T')[0]
+		}
+	},
+	onLoad() {
+		let tagStr =
+			"篮球、羽毛球、兵乓球、足球、滑板、滑旱冰、跑步、跳绳、举重、听音乐、看电影、绘画、写小说、看书、做弹弓玩、做木剑玩、做橡皮枪玩、积木、用麻将搭金字塔、拼图、拆装、扑克牌、小汽车、手表、鞋之类的、弹吉他、钢琴、萨克斯、葫芦丝、大号、小号、折纸、剪纸、品茶、涂鸦、英雄联盟、qq堂、cs、cf、地下城勇士、桌面游戏";
+		this.list_tag = tagStr.split("、");
+		this.getInfoData();
+	},
+	onShow() { },
+	methods: {
+		onBack() { },
+		onPreview() { },
+		chkSel() {
+			if (this.sel == 1) {
+				this.sel = 0;
+			} else {
+				this.sel = 1;
 			}
 		},
-		onLoad() {
-			let tagStr =
-				"篮球、羽毛球、兵乓球、足球、滑板、滑旱冰、跑步、跳绳、举重、听音乐、看电影、绘画、写小说、看书、做弹弓玩、做木剑玩、做橡皮枪玩、积木、用麻将搭金字塔、拼图、拆装、扑克牌、小汽车、手表、鞋之类的、弹吉他、钢琴、萨克斯、葫芦丝、大号、小号、折纸、剪纸、品茶、涂鸦、英雄联盟、qq堂、cs、cf、地下城勇士、桌面游戏";
-			this.list_tag = tagStr.split("、");
-			this.getInfoData();
+		chkSex(sex) {
+			this.sex = sex;
 		},
-		onShow() {},
-		methods: {
-			onBack() {},
-			onPreview() {},
-			chkSel() {
-				if (this.sel == 1) {
-					this.sel = 0;
-				} else {
-					this.sel = 1;
+		delTag(tg) {
+			let list_tag2 = [];
+			for (let i = 0; i < this.sel_tags.length; i++) {
+				if (this.sel_tags[i] != tg) {
+					list_tag2.push(this.sel_tags[i]);
 				}
-			},
-			chkSex(sex) {
-				this.sex = sex;
-			},
-			delTag(tg) {
-				let list_tag2 = [];
-				for (let i = 0; i < this.sel_tags.length; i++) {
-					if (this.sel_tags[i] != tg) {
-						list_tag2.push(this.sel_tags[i]);
-					}
+			}
+			this.sel_tags = list_tag2;
+		},
+		selTags(itm) {
+			let that = this;
+			let isIn = false;
+			for (let entry of this.sel_tags) {
+				if (entry == itm) {
+					isIn = true;
+					break;
 				}
-				this.sel_tags = list_tag2;
-			},
-			selTags(itm) {
-				let that = this;
-				let isIn = false;
+			}
+			return isIn;
+		},
+		chkTag(itm) {
+			if (this.selTags(itm)) {
+				let tmpTags = [];
 				for (let entry of this.sel_tags) {
-					if (entry == itm) {
-						isIn = true;
-						break;
+					if (entry != itm) {
+						tmpTags.push(entry);
 					}
 				}
-				return isIn;
-			},
-			chkTag(itm) {
-				if (this.selTags(itm)) {
-					let tmpTags = [];
-					for (let entry of this.sel_tags) {
-						if (entry != itm) {
-							tmpTags.push(entry);
-						}
-					}
-					this.sel_tags = tmpTags;
+				this.sel_tags = tmpTags;
+			} else {
+				if (this.sel_tags.length <= 9) {
+					this.sel_tags.push(itm);
 				} else {
-					if (this.sel_tags.length <= 9) {
-						this.sel_tags.push(itm);
-					} else {
-						this.$refs['ToastW3'].showToast({
-							title: "最多选择10个标签",
-							animation: 0
-						});
-					}
+					this.$refs['ToastW3'].showToast({
+						title: "最多选择10个标签",
+						animation: 0
+					});
+				}
+			}
+		},
+		sliderChange1(e) {
+			this.age = e.detail.value;
+		},
+		sliderChange2(e) {
+			this.height = e.detail.value;
+		},
+		sliderChange3(e) {
+			this.weight = e.detail.value;
+		},
+		SetSex() {
+			let that = this;
+			uni.showActionSheet({
+				itemColor: '#000000',
+				itemList: this.sexOptions,
+				success: function (res) {
+					that.sexText = that.sexOptions[res.tapIndex];
+					that.sex = res.tapIndex + 1;
+				},
+				fail: function (res) {
+					console.log(res.errMsg);
 				}
-			},
-			sliderChange1(e) {
-				this.age = e.detail.value;
-			},
-			sliderChange2(e) {
-				this.height = e.detail.value;
-			},
-			sliderChange3(e) {
-				this.weight = e.detail.value;
-			},
-			SetSex() {
-				let that = this;
-				uni.showActionSheet({
-					itemColor: '#000000',
-					itemList: this.sexOptions,
-					success: function(res) {
-						that.sexText = that.sexOptions[res.tapIndex];
-						that.sex = res.tapIndex + 1;
-					},
-					fail: function(res) {
-						console.log(res.errMsg);
+			});
+		},
+		getInfoData() {
+			uni.request({
+				url: this.$apiHost + '/Member/getinfoData',
+				data: {
+					uuid: getApp().globalData.uuid
+				},
+				header: {
+					'content-type': 'application/json'
+				},
+				success: (res) => {
+					console.log(res.data);
+					this.nickname = res.data.nickname;
+					this.wechat = res.data.wechat;
+					this.sex = res.data.sex;
+					this.sexText = this.sexOptions[res.data.sex - 1] || '';
+					this.birthday = res.data.birthday;
+					this.xinzuo_sel = this.getConstellation(this.birthday);
+					if (res.data.avator != "") {
+						this.avator = res.data.avator;
 					}
-				});
-			},
-			getInfoData() {
-				uni.request({
-					url: this.$apiHost + '/Member/getinfoData',
-					data: {
-						uuid: getApp().globalData.uuid
-					},
-					header: {
-						'content-type': 'application/json'
-					},
-					success: (res) => {
-						console.log(res.data);
-						this.nickname = res.data.nickname;
-						this.wechat = res.data.wechat;
-						this.sex = res.data.sex;
-						this.sexText = this.sexOptions[res.data.sex - 1] || '';
-						this.birthday = res.data.birthday;
-						this.xinzuo_sel = this.getConstellation(this.birthday);
-						if (res.data.avator != "") {
-							this.avator = res.data.avator;
-						}
-						if (res.data.aihao) {
-							this.sel_tags = res.data.aihao.split(",");
-						}
+					if (res.data.aihao) {
+						this.sel_tags = res.data.aihao.split(",");
 					}
-				});
-			},
-			submitData() {
-				let aihao = this.sel_tags.join(',')
-				let obj2 = {
-					uuid: getApp().globalData.uuid,
-					avator: this.avator,
-					nickname: this.nickname,
-					content: this.content,
-					sex: this.sex,
-					birthday: this.birthday,
-					xinzuo: this.xinzuo_sel,
-					ziye: this.ziye,
-					qianmin: this.qianmin,
-					aihao: aihao
 				}
-				uni.request({
-					url: this.$apiHost + '/Member/setinfoData',
-					data: obj2,
-					method: 'POST',
-					header: {
-						'Content-Type': 'application/x-www-form-urlencoded',
-						'sign': getApp().globalData.headerSign
-					},
-					dataType: 'json',
-					success: (res) => {
-						console.log("res", res.data)
-						this.$refs['ToastW3'].showToast({
-							title: res.data.str,
-							animation: 0
-						});
-						if (res.data.success == 'yes') {
-							setTimeout(function() {
-								uni.navigateBack()
-							}, 800)
-						}
-						this.getInfoData()
+			});
+		},
+		submitData() {
+			let aihao = this.sel_tags.join(',')
+			let obj2 = {
+				uuid: getApp().globalData.uuid,
+				avator: this.avator,
+				nickname: this.nickname,
+				content: this.content,
+				sex: this.sex,
+				birthday: this.birthday,
+				xinzuo: this.xinzuo_sel,
+				ziye: this.ziye,
+				qianmin: this.qianmin,
+				aihao: aihao
+			}
+			uni.request({
+				url: this.$apiHost + '/Member/setinfoData',
+				data: obj2,
+				method: 'POST',
+				header: {
+					'Content-Type': 'application/x-www-form-urlencoded',
+					'sign': getApp().globalData.headerSign
+				},
+				dataType: 'json',
+				success: (res) => {
+					console.log("res", res.data)
+					this.$refs['ToastW3'].showToast({
+						title: res.data.str,
+						animation: 0
+					});
+					if (res.data.success == 'yes') {
+						setTimeout(function () {
+							uni.navigateBack()
+						}, 800)
 					}
-				});
-			},
-			upload() {
-				this.checkRights();
-				console.log("----upload");
-				var _self = this;
-				uni.chooseImage({
-					count: 1,
-					sizeType: ['compressed'],
-					sourceType: ['album', 'camera'],
-					success: function(res) {
-						console.log('res:', res)
-						if (res.tempFilePaths.length > 0) {
-							_self.imglocal = res.tempFilePaths[0]
-							const tempFilePaths = res.tempFilePaths[0];
-							console.log('tempFilePaths:', tempFilePaths);
-							const uploadTask = uni.uploadFile({
-								url: _self.$apiHost + '/Xweb/upload_img?skey=' + _self.skey,
-								filePath: res.tempFilePaths[0],
-								name: 'file',
-								success: function(uploadFileRes) {
-									let resdata = JSON.parse(uploadFileRes.data)
-									console.log('Success11:', uploadFileRes);
-									console.log('Success21:', resdata);
-									if (resdata.success == 'yes') {
-										_self.showRights = false;
-										_self.avator = resdata.url;
-									}
-								},
-								fail: function(uploadFileFail) {
-									console.log('Error:', uploadFileFail.data);
-								},
-								complete: () => {
-									console.log('Complete:');
+					this.getInfoData()
+				}
+			});
+		},
+		upload() {
+			this.checkRights();
+			console.log("----upload");
+			var _self = this;
+			uni.chooseImage({
+				count: 1,
+				sizeType: ['compressed'],
+				sourceType: ['album', 'camera'],
+				success: function (res) {
+					console.log('res:', res)
+					if (res.tempFilePaths.length > 0) {
+						_self.imglocal = res.tempFilePaths[0]
+						const tempFilePaths = res.tempFilePaths[0];
+						console.log('tempFilePaths:', tempFilePaths);
+						const uploadTask = uni.uploadFile({
+							url: _self.$apiHost + '/Xweb/upload_img?skey=' + _self.skey,
+							filePath: res.tempFilePaths[0],
+							name: 'file',
+							success: function (uploadFileRes) {
+								let resdata = JSON.parse(uploadFileRes.data)
+								console.log('Success11:', uploadFileRes);
+								console.log('Success21:', resdata);
+								if (resdata.success == 'yes') {
+									_self.showRights = false;
+									_self.avator = resdata.url;
 								}
-							});
-						}
-					},
-					error: function(e) {
-						console.log(e);
+							},
+							fail: function (uploadFileFail) {
+								console.log('Error:', uploadFileFail.data);
+							},
+							complete: () => {
+								console.log('Complete:');
+							}
+						});
+					}
+				},
+				error: function (e) {
+					console.log(e);
+				}
+			});
+		},
+		checkRights() {
+			let that = this;
+			that.showRights = true;
+			requestAndroidPermission('android.permission.CAMERA')
+				.then(result => {
+					that.showRights = false;
+					if (result === 1) { } else if (result === 0) {
+						console.log('权限被拒绝');
+					} else if (result === -1) {
+						console.log('权限被永久拒绝');
 					}
+				})
+				.catch(error => {
+					that.showRights = true;
+					console.log('权限申请失败：', error);
 				});
-			},
-			checkRights() {
-				let that = this;
-				that.showRights = true;
-				requestAndroidPermission('android.permission.CAMERA')
-					.then(result => {
-						that.showRights = false;
-						if (result === 1) {} else if (result === 0) {
-							console.log('权限被拒绝');
-						} else if (result === -1) {
-							console.log('权限被永久拒绝');
-						}
-					})
-					.catch(error => {
-						that.showRights = true;
-						console.log('权限申请失败：', error);
-					});
-			},
-			onBirthdayChange(e) {
-				this.birthday = e.detail.value;
-				this.xinzuo_sel = this.getConstellation(this.birthday);
-			},
-			getConstellation(birthday) {
-				if (!birthday) return '';
-
-				const month = parseInt(birthday.split('-')[1]);
-				const day = parseInt(birthday.split('-')[2]);
+		},
+		onBirthdayChange(e) {
+			this.birthday = e.detail.value;
+			this.xinzuo_sel = this.getConstellation(this.birthday);
+		},
+		getConstellation(birthday) {
+			if (!birthday) return '';
 
-				// 星座日期数组
-				const constellationDates = [
-					[1, 20, "水瓶座"],
-					[2, 19, "双鱼座"],
-					[3, 21, "白羊座"],
-					[4, 20, "金牛座"],
-					[5, 21, "双子座"],
-					[6, 22, "巨蟹座"],
-					[7, 23, "狮子座"],
-					[8, 23, "处女座"],
-					[9, 23, "天秤座"],
-					[10, 24, "天蝎座"],
-					[11, 23, "射手座"],
-					[12, 22, "摩羯座"]
-				];
+			const month = parseInt(birthday.split('-')[1]);
+			const day = parseInt(birthday.split('-')[2]);
 
-				let constellation = "";
-				if (day < constellationDates[month - 1][1]) {
-					constellation = constellationDates[month - 1][2];
-				} else {
-					constellation = constellationDates[month % 12][2];
-				}
+			// 星座日期数组
+			const constellationDates = [
+				[1, 20, "水瓶座"],
+				[2, 19, "双鱼座"],
+				[3, 21, "白羊座"],
+				[4, 20, "金牛座"],
+				[5, 21, "双子座"],
+				[6, 22, "巨蟹座"],
+				[7, 23, "狮子座"],
+				[8, 23, "处女座"],
+				[9, 23, "天秤座"],
+				[10, 24, "天蝎座"],
+				[11, 23, "射手座"],
+				[12, 22, "摩羯座"]
+			];
 
-				return constellation;
+			let constellation = "";
+			if (day < constellationDates[month - 1][1]) {
+				constellation = constellationDates[month - 1][2];
+			} else {
+				constellation = constellationDates[month % 12][2];
 			}
+
+			return constellation;
 		}
 	}
+}
 </script>
 
 <style scoped lang="scss">
-	@import 'normal.scss';
+@import 'normal.scss';
 
-	.popSel {
-		position: fixed;
-		z-index: 999999;
-		top: 0;
-		left: 0;
-		background-color: #ffffff;
-		width: 100vh;
-		height: 100vh;
-	}
+.popSel {
+	position: fixed;
+	z-index: 999999;
+	top: 0;
+	left: 0;
+	background-color: #ffffff;
+	width: 100vh;
+	height: 100vh;
+}
 </style>

pages/my/follow.scss

@@ -1,79 +1,103 @@
 .page {
-	min-height: 100vh;
-	background-color: #fff;
-	padding-top: 10px;
+  min-height: 100vh;
+  background-color: #fff;
+  padding-top: 10px;
 }
 
 .tabs {
-	display: flex;
-	padding: 0 40px;
-	margin-bottom: 20px;
-	
-	.tab {
-		position: relative;
-		padding: 0 20px;
-		font-size: 16px;
-		color: #666;
-		
-		&.active {
-			color: #000;
-			font-weight: bold;
-			
-			&::after {
-				content: '';
-				position: absolute;
-				left: 20px;
-				right: 20px;
-				bottom: -6px;
-				height: 2px;
-				background-color: #5c5cff;
-			}
-		}
-	}
+  display: flex;
+  height: 100%;
+  justify-content: space-between;
+  align-items: center;
+  width: 246rpx;
+
+  .tab {
+    position: relative;
+    width: 96rpx;
+	height: 48rpx;
+    font-size: 32rpx; 
+	  font-family: 'PingFang SC-Bold'; 
+      color: #999;
+      font-weight: 400;
+    &.active {
+		color: #1F1F1F;
+		background: url("../../static/me/wd_img_qiehuan.png") center / cover no-repeat;
+       
+    }
+  }
 }
 
 .follow-list {
-	padding: 0 20px;
-	
-	.follow-item {
-		display: flex;
-		align-items: center;
-		padding: 15px 0;
-		
-		.avatar {
-			width: 50px;
-			height: 50px;
-			border-radius: 25px;
-			margin-right: 12px;
-		}
-		
-		.info {
-			flex: 1;
-			
-			.name {
-				font-size: 16px;
-				font-weight: 500;
-				margin-bottom: 4px;
-			}
-			
-			.desc {
-				font-size: 12px;
-				color: #999;
-			}
-		}
-		
-		.unfollow-btn {
-			font-size: 14px;
-			color: #666;
-			background: none;
-			border: 1px solid #ddd;
-			border-radius: 15px;
-			padding: 4px 12px;
-			margin: 0;
-			
-			&::after {
-				border: none;
-			}
+  padding: 0 20px;
+
+  .follow-item {
+    display: flex;
+    align-items: center;
+    padding: 15px 0;
+
+    .avator {
+     width: 120rpx ;
+	 height: 120rpx ;
+	 margin-right: 24rpx;
+    }
+
+    .info {
+      flex: 1;
+      .top-box {
+        display: flex;
+        align-items: center;
+        .name {
+          font-size: 32rpx;
+          font-weight: 500;
+          margin-bottom: 8rpx;
+        }
+        > image {
+          width: 36rpx;
+          margin-left: 8rpx;
+          margin-right: 10rpx;
+        }
+        .level {
+          font-weight: 400;
+          font-size: 20rpx;
+          font-family: "PingFang SC-Bold";
+          background: linear-gradient(360deg, #acf934 0%, #ffe439 100%);
+          border-radius: 8rpx;
+          padding: 2rpx 8rpx;
+          display: inline-block;
+        }
+      }
+      .desc {
+        font-size: 24rpx;
+        color: #999;
+      }
+    }
+
+    .unfollow-btn {
+      font-size: 24rpx;
+	  width: 144rpx;
+	  height: 52rpx;
+	  display: flex;
+	  justify-content: center;
+	  align-items: center;
+      color: #666;
+      background: none;
+      border: 2rpx solid #000;
+      border-radius:12rpx; 
+      margin: 0;
+	  font-family: 'PingFang SC-Bold';
+	  image{
+		display: none;
+		width: 16rpx;
+		height: 16rpx;
+		margin-right: 5rpx;
+	  }
+      &.active {
+        color: #ACF934;
+		background: #000;
+		image{
+			display: inline-block;
 		}
-	}
-}
+      }
+    }
+  }
+}

pages/my/follow.vue

@@ -1,83 +1,107 @@
 <template>
 	<view class="page">
-		<view class="tabs">
-			<view class="tab" 
-				:class="{ active: activeTab === 'follow' }" 
-				@click="switchTab('follow')">关注</view>
-			<view class="tab" 
-				:class="{ active: activeTab === 'fans' }"
-				@click="switchTab('fans')">粉丝</view>
-		</view>
-		
+		<PageHeader title=""   style="border: 1px solid #F2F6F2;">
+			<template slot="center">
+				<view class="tabs">
+					<view class="tab" :class="{ active: activeTab === 'follow' }" @click="switchTab('follow')">关注</view>
+					<view class="tab" :class="{ active: activeTab === 'fans' }" @click="switchTab('fans')">粉丝</view>
+				</view>
+			</template> 
+		</PageHeader>
+		<view  style="height: 90rpx;"></view>
+
 		<view class="follow-list">
 			<view class="follow-item" v-for="(item, index) in currentList" :key="index">
-				<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
+				<CircleAvatar class="avator" :src="item.avatar"></CircleAvatar>
 				<view class="info">
-					<view class="name">{{item.name}}</view>
-					<view class="desc">{{item.description}}</view>
+					<view class="top-box">
+						<view class="name">{{ item.name }}</view>
+
+						<image src="../../static/icon/wd_icon_nan.png" mode="widthFix" v-if="item.sex_id == 1" />
+						<image src="../../static/icon/wd_icon_nv.png" mode="widthFix" v-else-if="item.sex_id == 2" />
+						<view class="level">Lv{{ item.my_level }}</view>
+
+					</view>
+					<view class="desc">{{ item.description }}</view>
+				</view>
+				<view :class=" item.isFollowing ? 'unfollow-btn' : 'unfollow-btn active' " @click="toggleFollow(item)">
+					<image src="../../static/me/wd_icon_guanzhu.png"></image>
+					{{ item.isFollowing ? '取消关注' : '关注' }}
 				</view>
-				<button class="unfollow-btn" @click="toggleFollow(item)">
-					{{item.isFollowing ? '取消关注' : '关注'}}
-				</button>
 			</view>
 		</view>
 	</view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				activeTab: 'follow', // 当前激活的标签
-				followList: [
-					{
-						avatar: '/static/demo/avatar1.jpg',
-						name: '冷落',
-						description: 'AI设计师',
-						isFollowing: true
-					},
-					{
-						avatar: '/static/demo/avatar2.jpg',
-						name: '雾里',
-						description: '感谢你的关注，远方的陌生人',
-						isFollowing: true
-					}
-				],
-				fansList: [
-					{
-						avatar: '/static/demo/avatar3.jpg',
-						name: '小明',
-						description: '热爱生活的人',
-						isFollowing: false
-					},
-					{
-						avatar: '/static/demo/avatar4.jpg',
-						name: '阳光',
-						description: '摄影师',
-						isFollowing: true
-					}
-				]
-			}
-		},
-		computed: {
-			// 根据当前标签返回对应的列表数据
-			currentList() {
-				return this.activeTab === 'follow' ? this.followList : this.fansList;
-			}
+import PageHeader from '@/components/PageHeader/PageHeader.vue';
+import CircleAvatar from "@/components/CircleAvatar/CircleAvatar.vue";
+
+export default {
+	components: {
+		PageHeader,
+		CircleAvatar
+	},
+	data() {
+		return {
+			activeTab: 'follow', // 当前激活的标签
+			followList: [
+				{
+					avatar: 'http://e.zhichao.art/upload/2025-03/a6e7f16b074da870527bf49b3c337555_new.png',
+					name: '冷落',
+					description: 'AI设计师',
+					isFollowing: true,
+					sex_id: 1,
+					my_level: 10
+				},
+				{
+					avatar: 'http://e.zhichao.art/upload/2025-03/a6e7f16b074da870527bf49b3c337555_new.png',
+					name: '雾里',
+					description: '感谢你的关注，远方的陌生人',
+					isFollowing: true,
+					sex_id: 2,
+					my_level: 210
+				}
+			],
+			fansList: [
+				{
+					avatar: 'http://e.zhichao.art/upload/2025-03/a6e7f16b074da870527bf49b3c337555_new.png',
+					name: '小明',
+					description: '热爱生活的人',
+					isFollowing: false,
+					sex_id: 1,
+					my_level: 20
+				},
+				{
+					avatar: 'http://e.zhichao.art/upload/2025-03/a6e7f16b074da870527bf49b3c337555_new.png',
+					name: '阳光',
+					description: '摄影师',
+					isFollowing: true,
+					sex_id: 2,
+					my_level: 30
+				}
+			]
+		}
+	},
+	computed: {
+		// 根据当前标签返回对应的列表数据
+		currentList() {
+			return this.activeTab === 'follow' ? this.followList : this.fansList;
+		}
+	},
+	methods: {
+		// 切换标签
+		switchTab(tab) {
+			this.activeTab = tab;
 		},
-		methods: {
-			// 切换标签
-			switchTab(tab) {
-				this.activeTab = tab;
-			},
-			toggleFollow(item) {
-				item.isFollowing = !item.isFollowing;
-				// 这里可以添加调用后端API的逻辑
-			}
+		toggleFollow(item) {
+			item.isFollowing = !item.isFollowing;
+			// 这里可以添加调用后端API的逻辑
 		}
 	}
+}
 </script>
 
 <style scoped lang="scss">
-	@import 'follow.scss';
+@import 'follow.scss';
 </style>

pages/my/my.scss

@@ -535,160 +535,89 @@ page {
     }
   }
   .numlist1 {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-
-    .item {
-      width: 346rpx;
-      height: 520rpx;
-      margin-bottom: 30rpx;
-      background: #fff;
-      overflow: hidden;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .numlist2 {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    .num {
       position: relative;
       left: 0;
       top: 0;
-      .secrecy {
+      .incomplete-bg {
         position: absolute;
-        left: 14rpx;
-        top: 14rpx;
-        background: rgba(0, 0, 0, 0.3);
-        border-radius: 24rpx;
-        font-family: "PingFang SC-Medium";
-        font-size: 20rpx;
-        font-weight: 400;
-        color: #fff;
-        display: flex;
-        align-items: center;
-		justify-content: center;
-		padding: 3rpx 12rpx;
-
-        image {
-          width: 24rpx;
-          height: 24rpx;
-        }
-      }
-      .icon-box {
+        left: 0;
+        top: 0;
         width: 346rpx;
-        height: 468rpx;
-        padding: 28rpx 20rpx;
-        box-sizing: border-box;
-        background-color: #f8f9fa;
-        margin-bottom: 12rpx;
-        .icon {
-        }
-        &.icon-box2 {
-          > view {
-            width: 346rpx;
-            height: 346rpx;
-            overflow: hidden;
-          }
-          overflow: hidden;
-          display: flex;
-          align-items: center;
-          padding: 0;
-          justify-content: center;
-        }
+        height: 520rpx;
       }
-      .name {
-        font-size: 28rpx;
-        color: #1a4d2e;
-        font-family: "PingFang SC-Medium";
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+      .maskLayer {
+        background: rgba(0, 0, 0, 0.4);
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 346rpx;
+        height: 520rpx;
       }
-    }
-  }
-  .numlist2 {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-
-    .item {
-      width: 330rpx;
-      margin-bottom: 30rpx;
-      background: #fff;
-      border-radius: 16rpx;
-      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
-      overflow: hidden;
-
-      .num {
-        position: relative;
-        width: 100%;
-        height: 330rpx;
-        display: flex;
-        flex-direction: column;
-
-        .icon {
-          width: 100%;
-          height: 260rpx;
-          object-fit: contain;
-          background-color: #f8f9fa;
-        }
-
-        .queue-status {
+      .queue-status {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 346rpx;
+        height: 520rpx;
+        color: #fff;
+        .status-text {
+          position: absolute;
+          left: 0;
+          top: 0;
           width: 100%;
-          height: 260rpx;
+          height: 100%;
           display: flex;
-          align-items: center;
           justify-content: center;
-          background: #f8f9fa;
+          align-items: center;
 
-          .status-text {
-            font-size: 28rpx;
-            color: #666;
-            text-align: center;
-            padding: 10rpx 20rpx;
-            border-radius: 30rpx;
-            background: rgba(0, 0, 0, 0.05);
+          .state-img {
+            height: 104rpx;
+            width: 220rpx;
+            position: absolute;
+            left:50%;
+            top:50%;
+            transform: translate(-50%, -50%); 
           }
         }
-
-        .name {
-          padding: 16rpx;
-          font-size: 28rpx;
-          color: #333;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-
-        .task-type-tag {
-          position: absolute;
-          left: 16rpx;
-          bottom: 70rpx;
-          background: rgba(0, 0, 0, 0.6);
-          color: #fff;
-          font-size: 24rpx;
-          padding: 6rpx 16rpx;
-          border-radius: 20rpx;
-        }
+      }
+      .task-type-tag {
+        position: absolute;
+        left: 0;
+        top: 0;
+        padding-top: 14rpx;
+        padding-left: 12rpx;
       }
     }
+    .loading-more,
+    .no-more {
+      text-align: center;
+      padding: 20rpx 0;
+      color: #999;
+      font-size: 28rpx;
+    }
   }
-  .loading-more,
-  .no-more {
-    text-align: center;
-    padding: 20rpx 0;
-    color: #999;
-    font-size: 28rpx;
+  .btn_submit {
+    width: 660rpx;
+    height: 96rpx;
+    margin: 0 auto;
+    border: 2rpx solid #404040;
+    border-radius: 28rpx;
+    font-weight: bold;
+    font-size: 32rpx;
+    color: #ff2a95;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+  .blankHeight {
+    height: 100rpx;
   }
-}
-.btn_submit {
-  width: 660rpx;
-  height: 96rpx;
-  margin: 0 auto;
-  border: 2rpx solid #404040;
-  border-radius: 28rpx;
-  font-weight: bold;
-  font-size: 32rpx;
-  color: #ff2a95;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-}
-.blankHeight {
-  height: 100rpx;
 }

pages/my/my.vue

@@ -1,85 +1,115 @@
 <template>
-	<view class="page">
-		<view class="topBody">
-			<view class="header">
-				<view class="card-box">
-					<view class="card-top">
-						<view class="top-box">
-							<view class="hello-box"> Hello! </view>
-							<view class="settingBtn-box">
-								<image src="@/static/me/wd_icon_fenxian.png" mode=""></image>
-								<image src="@/static/me/wd_icon_shezhi.png" mode="" @click="navigateToSettings"></image>
-							</view>
-						</view>
-						<view class="userinfo-box" @click="goPage('/pages/my/editInfo')">
-							<view class="userinfo-left">
-								<CircleAvatar class="avator" :src="myinfo.avator"></CircleAvatar>
-							</view>
-							<view class="userinfo-right">
-								<view class="nickname">
-									<text class="one-omit">{{ myinfo.nickname }}</text>
-									<image src="../../static/icon/wd_icon_nan.png" mode="widthFix"
-										v-if="myinfo.sex_id == 1" />
-									<image src="../../static/icon/wd_icon_nv.png" mode="widthFix"
-										v-else-if="myinfo.sex_id == 2" />
-									<view class="level">Lv{{ myinfo.my_level }}</view>
-								</view>
-								<view class="label">
-									<view v-for="(item, index) in aihao_tags" :key="index + item">
-										{{ item }}
-									</view>
-								</view>
-							</view>
-						</view>
-						<view class="intro_row">
-							<block v-if="myinfo.content == ''">
-								<text class="intro_text  two-omit">添加简介</text>
-								<image src="@/static/icon/wd_icon_edit.png" mode="widthFix" class="add_icon" />
-							</block>
-							<uv-text v-else class="intro_text two-omit"> {{ myinfo.content }} </uv-text>
-						</view>
-						<view class="bom">
-							<view class="follow_info">
-								<view class="follow-box">
-									<view class="num">{{ myinfo.num_attention }}</view>
-									<view class="label">关注</view>
-								</view>
-								<view class="separator"></view>
-								<view class="follow-box">
-									<view class="num">{{ myinfo.num_fans }}</view>
-									<view class="label">粉丝</view>
-								</view>
-								<view class="separator"></view>
-								<view class="follow-box">
-									<view class="num">{{ myinfo.num_like }}</view>
-									<view class="label">获赞</view>
-								</view>
-							</view>
-							<view class="points-box">
-								<view class="points ">
-									<image src="@/static/icon/wd_icon_coin.png" mode=""></image>
-									{{ myinfo.num_gmd }}
-								</view>
-								<view class="points ">
-									<image src="@/static/icon/wd_icon_xingyuan.png" mode=""></image>
-									{{ myinfo.num_gmd }}
-								</view>
-							</view>
-						</view>
-					</view>
-					<view class="card-bom" @click="goPage('/pages/vip/index')">
-						<view class="content-box">
-							<image v-if="false" src="@/static/me/icon-vip2.png" mode=""></image>
-							<image v-else-if="0" src="@/static/me/icon-vip1.png" mode=""></image>
-							<image v-else src="@/static/me/icon-vip0.png" mode=""></image>
-							<text v-if="true">开启专属会员权益</text>
-							<text v-else>会员权益生效中</text>
-						</view>
-						<image src="@/static/me/wd_icon_jiantou.png" mode=""></image>
-					</view>
-				</view>
-			</view>
-			<!-- <view class="header1">
+  <view class="page">
+    <view class="topBody">
+      <view class="header">
+        <view class="card-box">
+          <view class="card-top">
+            <view class="top-box">
+              <view class="hello-box"> Hello! </view>
+              <view class="settingBtn-box">
+                <image src="@/static/me/wd_icon_fenxian.png" mode=""></image>
+                <image
+                  src="@/static/me/wd_icon_shezhi.png"
+                  mode=""
+                  @click="navigateToSettings"
+                ></image>
+              </view>
+            </view>
+            <view class="userinfo-box" @click="goPage('/pages/my/editInfo')">
+              <view class="userinfo-left">
+                <CircleAvatar
+                  class="avator"
+                  :src="myinfo.avator"
+                ></CircleAvatar>
+              </view>
+              <view class="userinfo-right">
+                <view class="nickname">
+                  <text class="one-omit">{{ myinfo.nickname }}</text>
+                  <image
+                    src="../../static/icon/wd_icon_nan.png"
+                    mode="widthFix"
+                    v-if="myinfo.sex_id == 1"
+                  />
+                  <image
+                    src="../../static/icon/wd_icon_nv.png"
+                    mode="widthFix"
+                    v-else-if="myinfo.sex_id == 2"
+                  />
+                  <view class="level">Lv{{ myinfo.my_level }}</view>
+                </view>
+                <view class="label">
+                  <view v-for="(item, index) in aihao_tags" :key="index + item">
+                    {{ item }}
+                  </view>
+                </view>
+              </view>
+            </view>
+            <view class="intro_row">
+              <block v-if="myinfo.content == ''">
+                <text class="intro_text two-omit">添加简介</text>
+                <image
+                  src="@/static/icon/wd_icon_edit.png"
+                  mode="widthFix"
+                  class="add_icon"
+                />
+              </block>
+              <uv-text v-else class="intro_text two-omit">
+                {{ myinfo.content }}
+              </uv-text>
+            </view>
+            <view class="bom">
+              <view class="follow_info" @click="navigateToFollow">
+                <view class="follow-box">
+                  <view class="num">{{ myinfo.num_attention }}</view>
+                  <view class="label">关注</view>
+                </view>
+                <view class="separator"></view>
+                <view class="follow-box">
+                  <view class="num">{{ myinfo.num_fans }}</view>
+                  <view class="label">粉丝</view>
+                </view>
+                <view class="separator"></view>
+                <view class="follow-box">
+                  <view class="num">{{ myinfo.num_like }}</view>
+                  <view class="label">获赞</view>
+                </view>
+              </view>
+              <view class="points-box">
+                <view class="points">
+                  <image src="@/static/icon/wd_icon_coin.png" mode=""></image>
+                  {{ myinfo.num_gmm }}
+                </view>
+                <view class="points">
+                  <image
+                    src="@/static/icon/wd_icon_xingyuan.png"
+                    mode=""
+                  ></image>
+                  {{ myinfo.num_gmd }}
+                </view>
+              </view>
+            </view>
+          </view>
+          <view class="card-bom" @click="goPage('/pages/vip/index')">
+            <view class="content-box">
+              <image
+                v-if="false"
+                src="@/static/me/icon-vip2.png"
+                mode=""
+              ></image>
+              <image
+                v-else-if="0"
+                src="@/static/me/icon-vip1.png"
+                mode=""
+              ></image>
+              <image v-else src="@/static/me/icon-vip0.png" mode=""></image>
+              <text v-if="true">开启专属会员权益</text>
+              <text v-else>会员权益生效中</text>
+            </view>
+            <image src="@/static/me/wd_icon_jiantou.png" mode=""></image>
+          </view>
+        </view>
+      </view>
+      <!-- <view class="header1">
 				<view class="topBg"></view>
 				<view class="settingBtn" @click="navigateToSettings">
 					<image src="/static/me/setting.png"></image>
@@ -137,23 +167,29 @@
 					</view>
 				</view>
 			</view> -->
-			<!-- <view class="whiteItem">
+      <!-- <view class="whiteItem">
 				<view class="btn" @click="goPage('/pages/vip/index')">开启专属会员权益</view>
 			</view> -->
-			<view class="myinfo">
-				<!-- <view class="line"></view> -->
-				<view class="tablist">
-					<view class="item" :class="{ active: activeTab === 0 }" @click="switchTab(0)">我的作品
-						<view class="indicator-triangle">
-						</view>
-					</view>
-					<view class="item" :class="{ active: activeTab === 1 }" @click="switchTab(1)">生成中
-						<view class="indicator-triangle">
-						</view>
-					</view>
-				</view>
-				<view class="numlist1" v-if="activeTab === 0" style="margin-top: 60rpx">
-					<view class="item" v-for="(item, index) in worksList" :key="index" @click="goWork(item)">
+      <view class="myinfo">
+        <!-- <view class="line"></view> -->
+        <view class="tablist">
+          <view
+            class="item"
+            :class="{ active: activeTab === 0 }"
+            @click="switchTab(0)"
+            >我的作品
+            <view class="indicator-triangle"> </view>
+          </view>
+          <view
+            class="item"
+            :class="{ active: activeTab === 1 }"
+            @click="switchTab(1)"
+            >生成中
+            <view class="indicator-triangle"> </view>
+          </view>
+        </view>
+        <view class="numlist1" v-if="activeTab === 0" style="margin-top: 60rpx">
+          <!-- 	<view class="item" v-for="(item, index) in worksList" :key="index" @click="goWork(item)">
 						<view v-if="item.task_type == 1" class="icon-box">
 							<image :class="'icon' + item.images" :src="item.images ||
 								item.img_url ||
@@ -177,61 +213,100 @@
 							<image src="@/static/icon/wd_icon_suo.png"></image>
 							仅个人可见
 						</view>
-					</view>
-				</view>
-				<view class="numlist2" v-if="activeTab === 1" style="margin-top: 60rpx">
-					<view class="item" v-for="(item, index) in worksList" :key="index">
-						<view class="num" @click="goWork(item)">
-
-							<image v-if="item.status == 9" class="icon"
-								:src="item.result_images || '../../static/logo.png'" mode="aspectFit" />
+					</view> -->
+          <WorkItem
+            v-for="(item, index) in worksList"
+            :secrecy="true"
+            :key="index"
+            :item="item"
+            @click="goWork(item)"
+          />
+        </view>
+        <view class="numlist2" v-if="activeTab === 1" style="margin-top: 60rpx">
+            <view class="item" v-for="(item, index) in worksList" :key="index">
+              <view class="num" @click="goWork(item)">
+                <WorkItem :item="item" />
 
-							<!-- 当activeTab为1时显示队列状态 -->
-							<view class="queue-status">
-								<!-- 排队中 -->
-								<view v-if="item.status === 1" class="status-text">
-									排队中
-									({{ item.queue_position }}/{{ item.all_position }})
-								</view>
-								<!-- 排队中 -->
-								<view v-if="item.status === 3 || item.status === 4" class="status-text">
-									生成失败</view>
-								<!-- 制作中 -->
-								<view v-else-if="item.status < 9" class="status-text">制作中</view>
-								<!-- 创作完成 -->
-								<view v-else-if="item.status === 9" class="status-text">创作完成</view>
-							</view>
+                <image
+                  class="incomplete-bg"
+                  v-if="item.status != 9"
+                  src="@/static/me/wd_bg_zhizuozhong.png"
+                />
+                <view class="maskLayer"></view>
+                <!-- 当activeTab为1时显示队列状态 -->
+                <view class="queue-status">
 
-							<view class="name">{{
-								item.title || item.description || "作品" + index
-							}}</view>
+                  <!-- 排队中 -->
+                  <view v-if="item.status === 1" class="status-text">
+					<!-- 排队中 -->
+                    <image class="state-img" src="@/static/me/wd_icon_paiduizhong.png"></image>
+                    <!-- ({{ item.queue_position }}/{{ item.all_position }}) -->
+                  </view>
+                  <!-- 生成失败 -->
+                  <view
+				  v-if="item.status === 3 || item.status === 4"
+				  class="status-text"
+                  > 
+				  <!-- 生成失败 -->
+                    <image class="state-img" src="@/static/me/wd_icon_zhizuoshibai.png"></image>
+                  </view>
+                  <!-- 制作中 -->
+                  <view v-else-if="item.status < 9" class="status-text">
+					<!-- 制作中 -->
+                    <image class="state-img" src="@/static/me/wd_icon_zhizuozhong.png"></image>
+                  </view>
+                  <!-- 创作完成 -->
+                  <view v-else-if="item.status === 9" class="status-text">
+					<!-- 创作完成 -->
+                    <image class="state-img" src="@/static/me/wd_icon_chuangzuowancheng.png"></image>
+                  </view>
+                </view>
+                <view class="name">{{
+                  item.title || item.description || "作品" + index
+                }}</view>
 
-							<!-- 显示任务类型标签 -->
-							<view class="task-type-tag">
-								<text v-if="item.task_type === 1">灵感创作</text>
-								<text v-else-if="item.task_type === 2">音乐</text>
-							</view>
-						</view>
-					</view>
-				</view>
+                <!-- 显示任务类型标签 -->
+                <view class="task-type-tag">
+					<image 
+					style="width: 120rpx; height:36rpx; "
+                   v-if="item.task_type === 1"
+                  src="@/static/me/wd_icon_lingganchuangzuo.png"
+                />
+					<image  
+					style="width: 82rpx; height:36rpx;"
+                   v-else-if="item.task_type === 2"
+                  src="@/static/me/wd_icon_yinyue.png"
+                />
+                  <!-- <text v-if="item.task_type === 1">灵感创作</text>
+                  <text v-else-if="item.task_type === 2">音乐</text> -->
+                </view>
+              </view>
+            </view>
+        </view>
 
-				<!-- 加载更多提示 -->
-				<!-- <view class="loading-more" v-if="isLoading">加载中...</view>
+        <!-- 加载更多提示 -->
+        <!-- <view class="loading-more" v-if="isLoading">加载中...</view>
 				<view class="no-more" v-if="!hasMore && worksList.length > 0">没有更多作品了</view>
 				<view class="no-more" v-if="!hasMore && worksList.length === 0">暂无作品</view> -->
-			</view>
-			<view style="width: 100%; text-align: center">杭州智潮创意科技有限公司</view>
+      </view>
+      <view style="width: 100%; text-align: center"
+        >杭州智潮创意科技有限公司</view
+      >
 
-			<view class="blankHeight"></view>
-			<view class="blankHeight"></view>
-		</view>
+      <view class="blankHeight"></view>
+      <view class="blankHeight"></view>
+    </view>
 
-		<!-- 确认框 -->
-		<CustomConfirm ref="customConfirm"></CustomConfirm>
-		<!-- 提示框 -->
-		<DialogBox ref="DialogBox"></DialogBox>
-		<tabbar-view :tabbars="tabbars" :currentIndex="4" ref="tabbar"></tabbar-view>
-	</view>
+    <!-- 确认框 -->
+    <CustomConfirm ref="customConfirm"></CustomConfirm>
+    <!-- 提示框 -->
+    <DialogBox ref="DialogBox"></DialogBox>
+    <tabbar-view
+      :tabbars="tabbars"
+      :currentIndex="4"
+      ref="tabbar"
+    ></tabbar-view>
+  </view>
 </template>
 
 <script>
@@ -240,336 +315,343 @@ import tabbar from "@/mixins/tabbar";
 import CustomConfirm from "@/components/custome-confirm/customeConfirm.vue";
 import CircleAvatar from "@/components/CircleAvatar/CircleAvatar.vue";
 import meCard from "@/components/meCard/meCard.vue";
+import WorkItem from "@/components/WorkItem/WorkItem.vue";
 export default {
-	components: {
-		tabbarView,
-		CustomConfirm,
-		CircleAvatar,
-		meCard
-	},
-	mixins: [tabbar],
-	data() {
-		return {
-			title: "",
-			sel: 1,
-			myinfo: {
-				avator: "../../static/logo.png",
-				nickname: "王思思",
-				join_name: "注册日期：2024年5月",
-				num_1: 0,
-				num_2: 0,
-				num_3: 0,
-				num_4: 0,
-				is_login: "no",
-				num_history: 0,
-				num_collection: 0,
-			},
-			aihao_tags: [],
-			menu_list: [],
-			data_list: [
-				{
-					url: "https://e.zhichao.art/AI_images/a_1112_10.png",
-				},
-				{
-					url: "https://e.zhichao.art/AI_images/a_1112_108.png",
-				},
-				{
-					url: "https://e.zhichao.art/AI_images/a_1112_113.png",
-				},
-				{
-					url: "https://e.zhichao.art/AI_images/a_1112_13.png",
-				},
-				{
-					url: "https://e.zhichao.art/AI_images/a_1112_137.png",
-				},
-				{
-					url: "https://e.zhichao.art/AI_images/a_1112_141.png",
-				},
-				{
-					url: "https://e.zhichao.art/AI_images/a_1114__562.png",
-				},
-				{
-					url: "https://e.zhichao.art/AI_images/a_1114__568.png",
-				},
-				{
-					url: "https://e.zhichao.art/AI_images/a_1114__569.png",
-				},
-				{
-					url: "https://e.zhichao.art/AI_images/a_1114__570.png",
-				},
-				{
-					url: "https://e.zhichao.art/AI_images/a_1114__571.png",
-				},
-				{
-					url: "https://e.zhichao.art/AI_images/a_1114__575.png",
-				},
-			],
-			activeTab: 0,
-			offset: 0,
-			hasMore: true,
-			isLoading: false,
-			worksList: [],
-		};
-	},
-	onLoad() {
-		// setTimeout(function() {
-		// 	uni.setNavigationBarColor({
-		// 		frontColor: '#ffffff',
-		// 		backgroundColor: '#00000000',
-		// 		animation: {
-		// 			duration: 400,
-		// 			timingFunc: 'easeIn'
-		// 		}
-		// 	})
-		// }, 200);
-	},
-	onShow() {
-		uni.$emit("check_login", () => { });
-		// this.loadData();
-		this.offset = 0;
-		this.hasMore = true;
-		this.worksList = [];
-		this.loadInfo();
-		this.loadWorksList();
-	},
-	onReachBottom() {
-		if (this.hasMore && !this.isLoading) {
-			this.loadMoreWorks();
-		}
-	},
-	methods: {
-		async showConfirm() {
-			let that = this;
-			this.$refs["customConfirm"]
-				.confirm({
-					title: "确认解绑",
-					content: "解绑微信账号后将无法继续使用它登录该App账号？",
-					DialogType: "inquiry",
-					btn1: "再考虑一下",
-					btn2: "确认解绑",
-					animation: 0,
-				})
-				.then((res) => { });
-		},
-		onBack() { },
-		chkSel() {
-			if (this.sel == 1) {
-				this.sel = 0;
-			} else {
-				this.sel = 1;
-			}
-		},
-		goPage(page) {
-			if (page == "kefu") {
-				let that = this;
-				// #ifdef APP-PLUS
-				plus.share.getServices((res) => {
-					const wechat = res.find((i) => i.id === "weixin");
-					if (wechat) {
-						wechat.openCustomerServiceChat(
-							{
-								corpid: "wwbc06aa8311b6ac08",
-								// url: 'https://work.weixin.qq.com/kfid/kfc4b0bcb4038d00a50'
-								url: that.myinfo.wxkf,
-							},
-							(src) => {
-								console.log("success:");
-							},
-							(err) => {
-								console.log("error:");
-							}
-						);
-					} else {
-						uni.showToast({
-							title: "没有检测到微信，请先安装",
-							icon: "error",
-						});
-					}
-				});
-				// #endif
-			} else if (page != "") {
-				uni.navigateTo({
-					url: page,
-				});
-			}
-		},
-		loadInfo() {
-			console.log({
-				uuid: getApp().globalData.uuid,
-				skey: getApp().globalData.skey,
-			});
-			uni.request({
-				url: this.$apiHost + "/User/getinfo",
-				data: {
-					uuid: getApp().globalData.uuid,
-					skey: getApp().globalData.skey,
-				},
-				header: {
-					"content-type": "application/json",
-					sign: getApp().globalData.headerSign,
-				},
-				success: (res) => {
-					console.log("----:",JSON.parse(JSON.stringify( res.data)));
-					if (res.data.need_login == "yes") {
-						// getApp().globalData.skey = "";
-						// getApp().globalData.uuid = "";
-						uni.removeStorageSync("wapptoken");
-						uni.redirectTo({
-							url: "/pages/login/login",
-						});
-						return;
-					}
-					if (res.data.aihao) {
-						this.aihao_tags = res.data.aihao.split(",");
-					}
-					this.myinfo = res.data;
-				},
-				complete: (com) => {
-					// uni.hideLoading();
-				},
-				fail: (e) => {
-					console.log("----e:", e);
-				},
-			});
-		},
-		onLogout() {
-			let that = this;
-			this.$refs["DialogBox"]
-				.confirm({
-					title: "提示",
-					content: "确定退出吗？",
-					DialogType: "inquiry",
-					btn1: "取消",
-					btn2: "退出",
-					animation: 0,
-				})
-				.then((res) => {
-					uni.request({
-						url: that.$apiHost + "/My/logout",
-						data: {
-							uuid: getApp().globalData.uuid,
-							skey: getApp().globalData.skey,
-						},
-						header: {
-							"content-type": "application/json",
-							sign: getApp().globalData.headerSign,
-						},
-						success: (res) => {
-							console.log("----:", res.data);
-							// getApp().globalData.skey = "";
-							// getApp().globalData.uuid = "";
-							uni.removeStorageSync("wapptoken");
-							uni.redirectTo({
-								url: "/pages/login/login",
-							});
-						},
-						complete: (com) => {
-							// uni.hideLoading();
-						},
-						fail: (e) => {
-							console.log("----e:", e);
-						},
-					});
-				});
-		},
-		switchTab(index) {
-			this.activeTab = index;
-			this.offset = 0;
-			this.hasMore = true;
-			this.worksList = [];
-			this.loadWorksList();
-		},
-		loadWorksList() {
-			if (this.isLoading) return;
-			this.isLoading = true;
+  components: {
+    tabbarView,
+    CustomConfirm,
+    CircleAvatar,
+    meCard,
+    WorkItem,
+  },
+  mixins: [tabbar],
+  data() {
+    return {
+      title: "",
+      sel: 1,
+      myinfo: {
+        avator: "../../static/logo.png",
+        nickname: "王思思",
+        join_name: "注册日期：2024年5月",
+        num_1: 0,
+        num_2: 0,
+        num_3: 0,
+        num_4: 0,
+        is_login: "no",
+        num_history: 0,
+        num_collection: 0,
+      },
+      aihao_tags: [],
+      menu_list: [],
+      data_list: [
+        {
+          url: "https://e.zhichao.art/AI_images/a_1112_10.png",
+        },
+        {
+          url: "https://e.zhichao.art/AI_images/a_1112_108.png",
+        },
+        {
+          url: "https://e.zhichao.art/AI_images/a_1112_113.png",
+        },
+        {
+          url: "https://e.zhichao.art/AI_images/a_1112_13.png",
+        },
+        {
+          url: "https://e.zhichao.art/AI_images/a_1112_137.png",
+        },
+        {
+          url: "https://e.zhichao.art/AI_images/a_1112_141.png",
+        },
+        {
+          url: "https://e.zhichao.art/AI_images/a_1114__562.png",
+        },
+        {
+          url: "https://e.zhichao.art/AI_images/a_1114__568.png",
+        },
+        {
+          url: "https://e.zhichao.art/AI_images/a_1114__569.png",
+        },
+        {
+          url: "https://e.zhichao.art/AI_images/a_1114__570.png",
+        },
+        {
+          url: "https://e.zhichao.art/AI_images/a_1114__571.png",
+        },
+        {
+          url: "https://e.zhichao.art/AI_images/a_1114__575.png",
+        },
+      ],
+      activeTab: 0,
+      offset: 0,
+      hasMore: true,
+      isLoading: false,
+      worksList: [],
+    };
+  },
+  onLoad() {
+    // setTimeout(function() {
+    // 	uni.setNavigationBarColor({
+    // 		frontColor: '#ffffff',
+    // 		backgroundColor: '#00000000',
+    // 		animation: {
+    // 			duration: 400,
+    // 			timingFunc: 'easeIn'
+    // 		}
+    // 	})
+    // }, 200);
+  },
+  onShow() {
+    uni.$emit("check_login", () => {});
+    // this.loadData();
+    this.offset = 0;
+    this.hasMore = true;
+    this.worksList = [];
+    this.loadInfo();
+    this.loadWorksList();
+  },
+  onReachBottom() {
+    if (this.hasMore && !this.isLoading) {
+      this.loadMoreWorks();
+    }
+  },
+  methods: {
+    async showConfirm() {
+      let that = this;
+      this.$refs["customConfirm"]
+        .confirm({
+          title: "确认解绑",
+          content: "解绑微信账号后将无法继续使用它登录该App账号？",
+          DialogType: "inquiry",
+          btn1: "再考虑一下",
+          btn2: "确认解绑",
+          animation: 0,
+        })
+        .then((res) => {});
+    },
+    onBack() {},
+    chkSel() {
+      if (this.sel == 1) {
+        this.sel = 0;
+      } else {
+        this.sel = 1;
+      }
+    },
+    goPage(page) {
+      if (page == "kefu") {
+        let that = this;
+        // #ifdef APP-PLUS
+        plus.share.getServices((res) => {
+          const wechat = res.find((i) => i.id === "weixin");
+          if (wechat) {
+            wechat.openCustomerServiceChat(
+              {
+                corpid: "wwbc06aa8311b6ac08",
+                // url: 'https://work.weixin.qq.com/kfid/kfc4b0bcb4038d00a50'
+                url: that.myinfo.wxkf,
+              },
+              (src) => {
+                console.log("success:");
+              },
+              (err) => {
+                console.log("error:");
+              }
+            );
+          } else {
+            uni.showToast({
+              title: "没有检测到微信，请先安装",
+              icon: "error",
+            });
+          }
+        });
+        // #endif
+      } else if (page != "") {
+        uni.navigateTo({
+          url: page,
+        });
+      }
+    },
+    loadInfo() {
+      console.log({
+        uuid: getApp().globalData.uuid,
+        skey: getApp().globalData.skey,
+      });
+      uni.request({
+        url: this.$apiHost + "/User/getinfo",
+        data: {
+          uuid: getApp().globalData.uuid,
+          skey: getApp().globalData.skey,
+        },
+        header: {
+          "content-type": "application/json",
+          sign: getApp().globalData.headerSign,
+        },
+        success: (res) => {
+          console.log("----:", JSON.parse(JSON.stringify(res.data)));
+          if (res.data.need_login == "yes") {
+            // getApp().globalData.skey = "";
+            // getApp().globalData.uuid = "";
+            uni.removeStorageSync("wapptoken");
+            uni.redirectTo({
+              url: "/pages/login/login",
+            });
+            return;
+          }
+          if (res.data.aihao) {
+            this.aihao_tags = res.data.aihao.split(",");
+          }
+          this.myinfo = res.data;
+        },
+        complete: (com) => {
+          // uni.hideLoading();
+        },
+        fail: (e) => {
+          console.log("----e:", e);
+        },
+      });
+    },
+    onLogout() {
+      let that = this;
+      this.$refs["DialogBox"]
+        .confirm({
+          title: "提示",
+          content: "确定退出吗？",
+          DialogType: "inquiry",
+          btn1: "取消",
+          btn2: "退出",
+          animation: 0,
+        })
+        .then((res) => {
+          uni.request({
+            url: that.$apiHost + "/My/logout",
+            data: {
+              uuid: getApp().globalData.uuid,
+              skey: getApp().globalData.skey,
+            },
+            header: {
+              "content-type": "application/json",
+              sign: getApp().globalData.headerSign,
+            },
+            success: (res) => {
+              console.log("----:", res.data);
+              // getApp().globalData.skey = "";
+              // getApp().globalData.uuid = "";
+              uni.removeStorageSync("wapptoken");
+              uni.redirectTo({
+                url: "/pages/login/login",
+              });
+            },
+            complete: (com) => {
+              // uni.hideLoading();
+            },
+            fail: (e) => {
+              console.log("----e:", e);
+            },
+          });
+        });
+    },
+    switchTab(index) {
+      this.activeTab = index;
+      this.offset = 0;
+      this.hasMore = true;
+      this.worksList = [];
+      this.loadWorksList();
+    },
+    loadWorksList() {
+      if (this.isLoading) return;
+      this.isLoading = true;
 
-			// 根据activeTab选择不同的API
-			let apiUrl = "";
-			if (this.activeTab === 0) {
-				apiUrl = "/Work/getlist";
-			} else {
-				apiUrl = "/WorkAI/getMyQueueList";
-			}
+      // 根据activeTab选择不同的API
+      let apiUrl = "";
+      if (this.activeTab === 0) {
+        apiUrl = "/Work/getlist";
+      } else {
+        apiUrl = "/WorkAI/getMyQueueList";
+      }
 
-			uni.request({
-				url: this.$apiHost + apiUrl,
-				data: {
-					uuid: getApp().globalData.uuid,
-					skey: getApp().globalData.skey,
-					type: "my", // 固定为my，表示获取自己的作品
-					offset: this.offset,
-					status: this.activeTab === 0 ? 1 : undefined, // 只有我的作品需要status参数
-				},
-				header: {
-					"content-type": "application/json",
-					sign: getApp().globalData.headerSign,
-				},
-				success: (res) => {
-					console.log("列表数据:", JSON.parse(JSON.stringify(res.data)));
-					if (res.data.success == "yes" && res.data.list) {
-						if (res.data.list.length > 0) {
-							this.worksList = [...this.worksList, ...res.data.list];
-							this.offset += res.data.list.length;
-						}
+      uni.request({
+        url: this.$apiHost + apiUrl,
+        data: {
+          uuid: getApp().globalData.uuid,
+          skey: getApp().globalData.skey,
+          type: "my", // 固定为my，表示获取自己的作品
+          offset: this.offset,
+          status: this.activeTab === 0 ? 1 : undefined, // 只有我的作品需要status参数
+        },
+        header: {
+          "content-type": "application/json",
+          sign: getApp().globalData.headerSign,
+        },
+        success: (res) => {
+          console.log("列表数据:", JSON.parse(JSON.stringify(res.data)));
+          if (res.data.success == "yes" && res.data.list) {
+            if (res.data.list.length > 0) {
+              this.worksList = [...this.worksList, ...res.data.list];
+              this.offset += res.data.list.length;
+            }
 
-						if (res.data.list.length < 20) {
-							this.hasMore = false;
-						}
-					} else {
-						this.hasMore = false;
-					}
+            if (res.data.list.length < 20) {
+              this.hasMore = false;
+            }
+          } else {
+            this.hasMore = false;
+          }
 
-					// 只有在"我的作品"标签下才更新data_list
-					if (this.activeTab === 0) {
-						this.updateDataList();
-					}
-				},
-				complete: () => {
-					this.isLoading = false;
-				},
-				fail: (e) => {
-					console.log("请求列表失败:", e);
-					this.isLoading = false;
-				},
-			});
-		},
-		loadMoreWorks() {
-			if (this.hasMore && !this.isLoading) {
-				this.loadWorksList();
-			}
-		},
-		updateDataList() {
-			this.data_list = this.worksList.map((item) => {
-				return {
-					url:
-						item.images || item.img_url || item.url || "../../static/logo.png",
-					title: item.title || item.description || "作品",
-					id: item.id,
-				};
-			});
-		},
-		goWork(item) {
-			uni.$emit("check_login", () => { });
-			if (this.activeTab == 0) {
-				uni.navigateTo({
-					url: "/pages/index/workDetail?id=" + item.id,
-				});
-			} else {
-				if (item.status >= 9) {
-					uni.navigateTo({
-						url: "/pages/makedetail/makeDetail?id=" + item.id,
-					});
-				}
-			}
-		},
-		navigateToSettings() {
-			uni.$emit("check_login", () => {
-				uni.navigateTo({
-					url: "/pages/my/setting",
-				});
-			});
-		},
-	},
+          // 只有在"我的作品"标签下才更新data_list
+          if (this.activeTab === 0) {
+            this.updateDataList();
+          }
+        },
+        complete: () => {
+          this.isLoading = false;
+        },
+        fail: (e) => {
+          console.log("请求列表失败:", e);
+          this.isLoading = false;
+        },
+      });
+    },
+    loadMoreWorks() {
+      if (this.hasMore && !this.isLoading) {
+        this.loadWorksList();
+      }
+    },
+    updateDataList() {
+      this.data_list = this.worksList.map((item) => {
+        return {
+          url:
+            item.images || item.img_url || item.url || "../../static/logo.png",
+          title: item.title || item.description || "作品",
+          id: item.id,
+        };
+      });
+    },
+    goWork(item) {
+      uni.$emit("check_login", () => {});
+      if (this.activeTab == 0) {
+        uni.navigateTo({
+          url: "/pages/index/workDetail?id=" + item.id,
+        });
+      } else {
+        if (item.status >= 9) {
+          uni.navigateTo({
+            url: "/pages/makedetail/makeDetail?id=" + item.id,
+          });
+        }
+      }
+    },
+    navigateToSettings() {
+      uni.$emit("check_login", () => {
+        uni.navigateTo({
+          url: "/pages/my/setting",
+        });
+      });
+    },
+    navigateToFollow() {
+     uni.navigateTo({
+       url: "/pages/my/follow",
+     });
+    },
+  },
 };
 </script>
 

pages/my/normal.scss

@@ -1,314 +1,471 @@
 page {
-	background-color: #ffffff;
+  background: url("../../static/me/wd_bg_bianjiziliao.png") top center/ 100%
+      auto no-repeat,
+    #f2f6f2;
 }
 .page {
-	background-color: #ffffff;
 }
 .topbg {
 }
+.PageHeader {
+  background: url("../../static/me/wd_bg_bianjiziliao.png") center top / 100%
+      auto no-repeat,
+    #f2f6f2;
+  background-position-y: var(--status-bar-height);
+  background: url("../../static/me/wd_bg_bianjiziliao.png") center top / 100%
+      auto no-repeat,
+    #f2f6f2;
+  background-position-y: var(--status-bar-height);
+}
 .topBody {
-	width:750rpx;
+  width: 750rpx;
 }
 .list_info {
-	display: flex;flex-direction: column;justify-content: flex-start;align-items: center;color:#fff;
-	width:750rpx;
-	.name {
-		width:690rpx;display: flex;flex-direction: row;justify-content: space-between;align-items: flex-start;
-		color:#333;font-size: 28rpx;margin-top: 20rpx;
-		.right {
-			font-size: 28rpx;
-			color: #FF2A95;
-		}
-	}
-	.desc {
-		width:690rpx;display: flex;flex-direction: row;justify-content: space-between;align-items: flex-start;
-		color:#999;font-size: 24rpx;margin-top: 20rpx;
-	}
-	.item {
-		width: 690rpx;height: 84rpx;margin-top: 20rpx;
-		background: #ffffff;position: relative;
-		border-radius: 24rpx 24rpx 24rpx 24rpx;
-		input {
-			width:100%;height:100%;padding-left: 20rpx;font-size: 28rpx;color:#333;
-			border:solid 1px #f0f0f0;border-radius: 12rpx;
-		}
-		.btn {
-			position: absolute;right:20rpx;top:0rpx;
-			font-weight: 400;
-			font-size: 28rpx;line-height: 84rpx;
-			color: #FF2A95;
-		}
-		.arrow {
-			width:36rpx;position: absolute;right:20rpx;top:24rpx;
-		}
-	}
-	.bcenter {
-		display: flex;flex-direction: row;justify-content: center;align-items: center;margin-top: 20rpx;
-		.avator {
-			width: 172rpx;position: relative;
-			.img {
-				width:172rpx;height:172rpx;border-radius: 86rpx;
-			}
-			.photo {
-				width:48rpx;position: absolute;bottom:0;right:0;
-			}
-		}
-	}
-	.item2 {
-		width: 690rpx;height: 84rpx;margin-top: 20rpx;
-		display: flex;flex-direction: row;justify-content: center;align-items: center;
-		.sex {
-			width: 334rpx;height: 84rpx;
-			background: #ffffff;
-			border-radius: 24rpx;
-			border: 2rpx solid #282828;color:#999;
-			display: flex;flex-direction: row;justify-content: center;align-items: center;
-		}
-		.active {
-			border: 4rpx solid #FF2A95;color:#FF2A95;
-		}
-		.sex2 {
-			image {
-				width:172rpx;
-			}
-		}
-	}
-	.itemSex {
-		width: 690rpx;margin-top: 20rpx;
-		display: flex;flex-direction: row;justify-content: center;align-items: center;
-		.sex2 {
-			display: flex;flex-direction: column;justify-content: flex-end;align-items: center;
-			width:210rpx;height:210rpx;
-			text {
-				color:#999;
-			}
-			image {
-				width:132rpx;height:132rpx;
-			}
-		}
-		.active {
-			text {
-				color:#fff;
-			}
-			image {
-				border: 4rpx solid #36D6FF;border-radius: 172rpx;width:172rpx;height:172rpx;
-			}
-		}
-	}
-	.itemSingle {
-		width: 690rpx;height: 84rpx;margin-top: 20rpx;
-		display: flex;flex-direction: row;justify-content: center;align-items: center;
-		.slider {
-			width: 100%;
-		}
-	}
-	.itemXL {
-		width: 690rpx;
-	}
-	.item_tag {
-		display: flex;flex-direction: row;justify-content: flex-start;align-items: center;
-		flex-wrap: wrap;width: 690rpx;padding:20rpx;
-		.tag {
-			border-radius: 12rpx;margin-right: 10rpx;margin-top:10rpx;padding:0rpx 20rpx;height:60rpx;
-			border: 2rpx solid #e0e0e0;color:#333;
-			display: flex;flex-direction: row;justify-content: center;align-items: center;
-			.close {
-				width:36rpx;margin-left:10rpx;
-			}
-		}
-		.active {
-			border-radius: 20rpx;
-			border: 2rpx solid #FF5967;
-		}
-		.addNew {
-			margin-right: 10rpx;margin-top:10rpx;padding:0rpx 20rpx;height:60rpx;border-radius: 12rpx;background: #959595;color:#fff;
-			display: flex;flex-direction: row;justify-content: center;align-items: center;
-		}
-	}
-	.title {
-		font-size: 36rpx;
-		font-weight: bold;
-		color: #333;
-		text-align: center;
-		margin-top: 40rpx;
-		width: 100%;
-	}
-	.subtitle {
-		font-size: 28rpx;
-		color: #959595;
-		text-align: center;
-		margin-top: 20rpx;
-		width: 100%;
-	}
-	.phone_input {
-		width: 690rpx;
-		height: 84rpx;
-		margin-top: 40rpx;
-		background: #ffffff;
-		border-radius: 24rpx;
-		display: flex;
-		align-items: center;
-		.area_code {
-			padding: 0 20rpx;
-			font-size: 28rpx;
-			color: #333;
-			border-right: 1rpx solid #e0e0e0;
-		}
-		.input {
-			flex: 1;
-			height: 100%;
-			padding-left: 20rpx;
-			font-size: 28rpx;
-			color: #333;
-		}
-	}
-	.code_input {
-		width: 690rpx;
-		height: 84rpx;
-		margin-top: 20rpx;
-		background: #ffffff;
-		border-radius: 24rpx;
-		display: flex;
-		align-items: center;
-		.input {
-			flex: 1;
-			height: 100%;
-			padding-left: 20rpx;
-			font-size: 28rpx;
-			color: #333;
-		}
-		.btn {
-			padding: 0 30rpx;
-			font-size: 28rpx;
-			color: #FF2A95;
-			&.disabled {
-				color: #999;
-			}
-		}
-	}
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  color: #fff;
+  width: 750rpx;
+  .name {
+    width: 690rpx;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+    color: #333;
+    font-size: 28rpx;
+    margin-top: 20rpx;
+    .right {
+      font-size: 28rpx;
+      color: #ff2a95;
+    }
+  }
+  .desc {
+    width: 690rpx;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+    color: #999;
+    font-size: 24rpx;
+    margin-top: 20rpx;
+  }
+  .item {
+    width: 690rpx;
+    height: 84rpx;
+    margin-top: 20rpx;
+    background: #ffffff;
+    position: relative;
+    border-radius: 24rpx 24rpx 24rpx 24rpx;
+    input {
+      width: 100%;
+      height: 100%;
+      padding-left: 20rpx;
+      font-size: 28rpx;
+      color: #333;
+      border: solid 1px #f0f0f0;
+      border-radius: 12rpx;
+    }
+    .btn {
+      position: absolute;
+      right: 20rpx;
+      top: 0rpx;
+      font-weight: 400;
+      font-size: 28rpx;
+      line-height: 84rpx;
+      color: #ff2a95;
+    }
+    .arrow {
+      width: 36rpx;
+      position: absolute;
+      right: 20rpx;
+      top: 24rpx;
+    }
+  }
+  .bcenter {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    margin-top: 120rpx;
+    .avator {
+      width: 200rpx;
+      height: 200rpx;
+      position: relative;
+      .img {
+        width: 172rpx;
+        height: 172rpx;
+        border-radius: 86rpx;
+      }
+      .photo {
+        width: 64rpx;
+        height: 64rpx;
+        position: absolute;
+        bottom: 0;
+        right: 10rpx;
+      }
+    }
+  }
+  .item2 {
+    width: 690rpx;
+    height: 84rpx;
+    margin-top: 20rpx;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    .sex {
+      width: 334rpx;
+      height: 84rpx;
+      background: #ffffff;
+      border-radius: 24rpx;
+      border: 2rpx solid #282828;
+      color: #999;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+    }
+    .active {
+      border: 4rpx solid #ff2a95;
+      color: #ff2a95;
+    }
+    .sex2 {
+      image {
+        width: 172rpx;
+      }
+    }
+  }
+  .itemSex {
+    width: 690rpx;
+    margin-top: 20rpx;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    .sex2 {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      align-items: center;
+      width: 210rpx;
+      height: 210rpx;
+      text {
+        color: #999;
+      }
+      image {
+        width: 132rpx;
+        height: 132rpx;
+      }
+    }
+    .active {
+      text {
+        color: #fff;
+      }
+      image {
+        border: 4rpx solid #36d6ff;
+        border-radius: 172rpx;
+        width: 172rpx;
+        height: 172rpx;
+      }
+    }
+  }
+  .itemSingle {
+    width: 690rpx;
+    height: 84rpx;
+    margin-top: 20rpx;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    .slider {
+      width: 100%;
+    }
+  }
+  .itemXL {
+    width: 690rpx;
+  }
+  .item_tag {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
+    width: 690rpx;
+    padding: 20rpx;
+    .tag {
+      border-radius: 12rpx;
+      margin-right: 10rpx;
+      margin-top: 10rpx;
+      padding: 8rpx 16rpx;
+      height: 60rpx;
+      border: 2rpx solid #eee;
+      color: #333;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+	  background: #eeeeee;
+      .close {
+        width: 28rpx;
+        margin-left: 2rpx;
+		position: relative;
+		
+      }
+    }
+    .active {
+      border-radius: 20rpx;
+      border: 2rpx solid #ff5967;
+    }
+    .addNew {
+      margin-right: 10rpx;
+      margin-top: 10rpx;
+      padding: 0rpx 20rpx;
+      height: 60rpx;
+      border-radius: 12rpx;
+      background: #1F1F1F;
+      color: #fff;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+  .title {
+    font-size: 36rpx;
+    font-weight: bold;
+    color: #333;
+    text-align: center;
+    margin-top: 40rpx;
+    width: 100%;
+  }
+  .subtitle {
+    font-size: 28rpx;
+    color: #959595;
+    text-align: center;
+    margin-top: 20rpx;
+    width: 100%;
+  }
+  .phone_input {
+    width: 690rpx;
+    height: 84rpx;
+    margin-top: 40rpx;
+    background: #ffffff;
+    border-radius: 24rpx;
+    display: flex;
+    align-items: center;
+    .area_code {
+      padding: 0 20rpx;
+      font-size: 28rpx;
+      color: #333;
+      border-right: 1rpx solid #e0e0e0;
+    }
+    .input {
+      flex: 1;
+      height: 100%;
+      padding-left: 20rpx;
+      font-size: 28rpx;
+      color: #333;
+    }
+  }
+  .code_input {
+    width: 690rpx;
+    height: 84rpx;
+    margin-top: 20rpx;
+    background: #ffffff;
+    border-radius: 24rpx;
+    display: flex;
+    align-items: center;
+    .input {
+      flex: 1;
+      height: 100%;
+      padding-left: 20rpx;
+      font-size: 28rpx;
+      color: #333;
+    }
+    .btn {
+      padding: 0 30rpx;
+      font-size: 28rpx;
+      color: #ff2a95;
+      &.disabled {
+        color: #999;
+      }
+    }
+  }
 }
 .list_info2 {
-	display: flex;flex-direction: column;justify-content: flex-start;align-items: center;color:#fff;
-	width:750rpx;
-	
-	.item {
-		width: 690rpx;height: 84rpx;margin-top: 10rpx;color:#fff;font-size: 28rpx;
-		display: flex;flex-direction: row;justify-content: space-between;align-items: center;
-		border-bottom: solid 0px #393939;
-		text {
-			
-		}
-		.arrow {
-			width:36rpx;
-		}
-		.desc {
-			color:#fff;
-		}
-	}
-	.tips {
-		padding:30rpx;color:#959595;
-	}
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  color: #fff;
+  width: 750rpx;
+
+  .item {
+    width: 690rpx;
+    height: 84rpx;
+    margin-top: 10rpx;
+    color: #fff;
+    font-size: 28rpx;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: solid 0px #393939;
+    text {
+    }
+    .arrow {
+      width: 36rpx;
+    }
+    .desc {
+      color: #fff;
+    }
+  }
+  .tips {
+    padding: 30rpx;
+    color: #959595;
+  }
 }
 .btn_submit {
-	width: 660rpx;height: 96rpx;position: fixed;bottom:50rpx;left:45rpx;
-	background: rgb(85, 85, 85);
-	border-radius: 50rpx;font-weight: bold;font-size: 32rpx;color: #FFFFFF;
-	display: flex;flex-direction: row;justify-content: center;align-items: center;
+  width: 660rpx;
+  height: 96rpx;
+  position: fixed;
+  bottom: 50rpx;
+  left: 45rpx;
+  background: rgb(85, 85, 85);
+  border-radius: 50rpx;
+  font-weight: bold;
+  font-size: 32rpx;
+  color: #ffffff;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
 }
 .btn_list {
-	width: 660rpx;height: 96rpx;position: fixed;bottom:50rpx;left:45rpx;
-	display: flex;flex-direction: row;justify-content: space-between;align-items: center;
-	.btn_submit1 {
-		width: 326rpx;height: 96rpx;border: 2rpx solid #D0D0D0;
-		border-radius: 28rpx;font-weight: normal;font-size: 32rpx;color: #959595;
-		display: flex;flex-direction: row;justify-content: center;align-items: center;
-	}
-	.btn_submit2 {
-		width: 312rpx;height: 96rpx;
-		background: linear-gradient( 142deg, #FF5967 0%, #FF2A95 100%);
-		border-radius: 28rpx;font-weight: normal;font-size: 32rpx;color: #FFFFFF;
-		display: flex;flex-direction: row;justify-content: center;align-items: center;
-	}
+  width: 660rpx;
+  height: 96rpx;
+  position: fixed;
+  bottom: 50rpx;
+  left: 45rpx;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  .btn_submit1 {
+    width: 326rpx;
+    height: 96rpx;
+    border: 2rpx solid #d0d0d0;
+    border-radius: 28rpx;
+    font-weight: normal;
+    font-size: 32rpx;
+    color: #959595;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+  .btn_submit2 {
+    width: 312rpx;
+    height: 96rpx;
+    background: linear-gradient(142deg, #ff5967 0%, #ff2a95 100%);
+    border-radius: 28rpx;
+    font-weight: normal;
+    font-size: 32rpx;
+    color: #ffffff;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
 }
 .picker-view {
-	width: 690rpx;
-	height: 400rpx;
-	margin-top: 20rpx;
-	background-color: #00000000;
+  width: 690rpx;
+  height: 400rpx;
+  margin-top: 20rpx;
+  background-color: #00000000;
 }
 .itemXll {
-	line-height: 100rpx;
-	text-align: center;
+  line-height: 100rpx;
+  text-align: center;
 }
 .selectLine {
-	background: #80404040;border-radius: 24rpx;height:100rpx;border:0;border-top:0;
+  background: #80404040;
+  border-radius: 24rpx;
+  height: 100rpx;
+  border: 0;
+  border-top: 0;
 }
 // 给中间选中行添加border-radius
 ::v-deep .itemXll .selectLine {
-    border-radius: 0 16rpx 16rpx 0;
+  border-radius: 0 16rpx 16rpx 0;
 }
 ::v-deep .itemXll .selectLine {
-    border-radius: 16rpx 0 0 16rpx;
+  border-radius: 16rpx 0 0 16rpx;
 }
- 
+
 // 修改原有的上下边框颜色
 ::v-deep .selectLine::after {
-    border-bottom: 0rpx solid #000;
+  border-bottom: 0rpx solid #000;
 }
 ::v-deep .selectLine::before {
-    border-top: 0rpx solid #000;
+  border-top: 0rpx solid #000;
 }
 .blankHeight {
-	height:300rpx;
+  height: 300rpx;
 }
 .info_card {
-	width: 690rpx;min-height:120rpx;
-	background: #ffffff;
-	border-radius: 24rpx;
-	padding: 0;
-	margin-top: 0rpx;
-	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
-	
-	.info_item {
-		height: 100rpx;
-		display: flex;
-		align-items: center;
-		padding: 0 30rpx;
-		border-bottom: 1rpx solid #f5f5f5;
-		
-		&:last-child {
-			border-bottom: none;
-		}
-		
-		.label {
-			width: 120rpx;
-			font-size: 28rpx;
-			color: #333;
-		}
-		
-		.content {
-			flex: 1;
-			display: flex;
-			align-items: center;
-			justify-content: flex-end;
-			
-			input {
-				text-align: right;
-				font-size: 28rpx;
-				color: #333;
-			}
-			
-			.arrow {
-				width: 36rpx;
-				margin-left: 10rpx;
-			}
-		}
-	}
+  width: 690rpx;
+  min-height: 120rpx;
+  background: #ffffff;
+  border-radius: 24rpx;
+  padding: 0;
+  margin-top: 0rpx;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+
+  .info_item {
+    height: 100rpx;
+    display: flex;
+    align-items: center;
+    padding: 0 30rpx;
+    border-bottom: 1rpx solid #f5f5f5;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .label {
+      width: 120rpx;
+      font-size: 28rpx;
+      color: #1f1f1f;
+      font-family: "PingFang SC-Medium";
+    }
+
+    .content {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+
+      input {
+        text-align: right;
+        font-size: 28rpx;
+        color: #333;
+      }
+
+      .arrow {
+        width: 36rpx;
+        margin-left: 10rpx;
+      }
+    }
+  }
 }
 .section_title {
-	font-size: 32rpx;
-	font-weight: bold;
-	color: #333;
-	margin: 30rpx 0 20rpx 30rpx;
-	width: 690rpx;
-}
+  font-size: 26rpx;
+  color: #1f1f1f;
+  font-weight: 600;
+  margin: 70rpx 0 20rpx 30rpx;
+  font-family: "PingFang SC-Medium";
+  width: 690rpx;
+}

pages/my/security.scss

@@ -1,11 +1,13 @@
 page {
-	background-color: #f8f8f8;
+	background-color: #F2F6F2;
 }
 
 .page {
 	padding: 20rpx;
 }
-
+.red{
+	color: #FF0000 !important;
+}
 .group {
 	background-color: #ffffff;
 	border-radius: 16rpx;
@@ -13,7 +15,7 @@ page {
 	padding: 0 30rpx;
 	
 	.item {
-		height: 100rpx;
+		height: 88rpx;
 		display: flex;
 		flex-direction: row;
 		justify-content: space-between;
@@ -45,8 +47,8 @@ page {
 			
 			.arrow {
 				width: 36rpx;
-				height: 36rpx;
+				height: 36rpx; 
 			}
 		}
 	}
-} 
+}

pages/my/security.vue

@@ -5,7 +5,7 @@
 			<view class="item" @click="goPage('/pages/my/editInfo')">
 				<text class="title">基本资料</text>
 				<view class="right">
-					<text class="action">去完善</text>
+					<text class="value">去完善</text>
 					<image class="arrow" src="../../static/me/arrow_right_gray.png" mode="widthFix"></image>
 				</view>
 			</view>
@@ -16,7 +16,7 @@
 			<view class="item" @click="goPage('/pages/my/editMobile')">
 				<text class="title">手机号</text>
 				<view class="right">
-					<text class="value">{{phoneNumber || '未绑定'}}</text>
+					<text class="value">{{ phoneNumber || '未绑定' }}</text>
 					<image class="arrow" src="../../static/me/arrow_right_gray.png" mode="widthFix"></image>
 				</view>
 			</view>
@@ -46,47 +46,58 @@
 				</view>
 			</view>
 		</view>
+
+		<!-- 删除账号组 -->
+		<view class="group">
+			<view class="item" @click="goPage('/pages/my/editInfo')">
+				<text class="title red">删除用户</text>
+				<view class="right" >
+					<text class="value red">注销账户</text>
+					<image class="arrow" style="width: 30rpx; height: 30rpx;" src="../../static/me/wd_icon_jiantou_red.png" mode="widthFix"></image>
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				phoneNumber: '', // 用户手机号
-			}
+export default {
+	data() {
+		return {
+			phoneNumber: '', // 用户手机号
+		}
+	},
+	onLoad() {
+		this.loadUserInfo()
+	},
+	methods: {
+		loadUserInfo() {
+			// 这里添加获取用户信息的逻辑
+			// 获取手机号等信息
+		},
+		goPage(url) {
+			uni.navigateTo({
+				url: url
+			})
 		},
-		onLoad() {
-			this.loadUserInfo()
+		bindWechat() {
+			// 微信绑定逻辑
+			uni.showToast({
+				title: '暂未开放',
+				icon: 'none'
+			})
 		},
-		methods: {
-			loadUserInfo() {
-				// 这里添加获取用户信息的逻辑
-				// 获取手机号等信息
-			},
-			goPage(url) {
-				uni.navigateTo({
-					url: url
-				})
-			},
-			bindWechat() {
-				// 微信绑定逻辑
-				uni.showToast({
-					title: '暂未开放',
-					icon: 'none'
-				})
-			},
-			bindQQ() {
-				// QQ绑定逻辑
-				uni.showToast({
-					title: '暂未开放',
-					icon: 'none'
-				})
-			}
+		bindQQ() {
+			// QQ绑定逻辑
+			uni.showToast({
+				title: '暂未开放',
+				icon: 'none'
+			})
 		}
 	}
+}
 </script>
 
 <style scoped lang="scss">
-	@import 'security.scss';
+@import 'security.scss';
 </style>

pages/my/setting.scss

@@ -1,88 +1,93 @@
 page {
-	background-color: #ffffff;
+  background-color: #f2f6f2;
+  padding: 0 20rpx;
+  box-sizing: border-box;
+  padding-bottom: 50rpx;
 }
 .page {
-	background-color: #ffffff;
+  background-color: #f2f6f2;
 }
 
 .topBody {
-	width:750rpx;
+  width: 100%;
 }
 .list_info {
-	display: flex;
-	flex-direction: column;
-	width: 750rpx;
-	padding: 20rpx 0;
-	
-	.group-header {
-		padding: 20rpx 30rpx;
-		font-size: 28rpx;
-		color: #999;
-		background-color: #f8f8f8;
-	}
-	
-	.item {
-		width: 750rpx;
-		height: 100rpx;
-		padding: 0 30rpx;
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-		align-items: center;
-		border-bottom: solid 1px #f0f0f0;
-		
-		.item-left {
-			display: flex;
-			align-items: center;
-			
-			.icon {
-				width: 40rpx;
-				height: 40rpx;
-				margin-right: 20rpx;
-			}
-			
-			text {
-				font-size: 28rpx;
-				color: #333;
-			}
-		}
-		
-		.item-right {
-			display: flex;
-			align-items: center;
-			
-			.arrow {
-				width: 36rpx;
-			}
-		}
-	}
-	
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 20rpx 0;
+
+  .group-header {
+    padding: 24rpx;
+	padding-bottom: 0;
+    font-size: 26rpx;
+    color: #000;
+	font-family: 'PingFang SC-Medium';
+    background-color: #fff;
+	overflow: hidden; 
+	border-top-left-radius: 20rpx;
+	border-top-right-radius: 20rpx;
+  }
+
+  .item {
+    width: 100%;
+    height: 124rpx;
+    padding: 0 30rpx;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: solid 1px #f0f0f0;
+    background: #fff;
+    .item-left {
+      display: flex;
+      align-items: center;
+
+      .icon {
+        width: 76rpx;
+        height: 76rpx;
+        margin-right: 20rpx;
+      }
+
+      text {
+        font-size: 28rpx;
+        color: #333;
+      }
+    }
+
+    .item-right {
+      display: flex;
+      align-items: center;
+
+      .arrow {
+        width: 36rpx;
+      }
+    }
+  }
 }
-.version-info {
-	position: fixed;
-	width: 100%;
-	text-align: center;
-	font-size: 24rpx;
-	color: #999;
-	position: fixed;
-	bottom: 176rpx;
+.version-info { 
+  width: 100%;
+  text-align: center;
+  font-size: 24rpx;
+  color: #999; 
+  margin-top: 166rpx;
 }
 .btn_submit {
-	width: 660rpx;
-	height: 96rpx;
-	position: fixed;
-	bottom: 50rpx;
-	left: 45rpx;
-	border: 2rpx solid #f0f0f0;
-	border-radius: 28rpx;
-	font-size: 32rpx;
-	color: #FF2A95;
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-	align-items: center;
-	background-color: #fff;
+  width: 660rpx;
+  height: 96rpx; 
+  border: 2rpx solid #f0f0f0;
+  border-radius: 28rpx;
+  font-size: 32rpx;
+  color: #1F1F1F;
+  font-family: 'PingFang SC-Bold';
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background-color: #fff;
+  margin: 0 auto;
+  margin-top: 15rpx; 
 }
 .blankHeight {
-	height:300rpx;
-}
+  height: 300rpx;
+}

pages/my/setting.vue

@@ -1,31 +1,36 @@
 <template>
 	<view class="page">
 		<view class="list_info">
-			<!-- 基础设置组 -->
+			<view class="">
+					<!-- 基础设置组 -->
 			<view class="group-header">基础设置</view>
-			<view class="item" v-for="(item,index) in basicSettings" @click="goPage(item.path)">
+			<view class="item basic" v-for="(item,index) in basicSettings" :key="item.name + index" @click="goPage(item.path)">
 				<view class="item-left">
 					<image class="icon" :src="item.icon" mode="widthFix"></image>
 					<text>{{item.name}}</text>
 				</view>
 				<view class="item-right">
-					<switch v-if="item.switch == 1" checked color="#FFCC33" style="transform:scale(0.7)" />
+					<switch v-if="item.switch == 1" checked class="custom-switch" color="#acf934" style="transform:scale(0.7)" />
 					<image v-else class="arrow" src="../../static/me/arrow_right_gray.png" mode="widthFix"></image>
 				</view>
 			</view>
-
-			<!-- 更多设置组 -->
-			<view class="group-header">更多</view>
-			<view class="item" v-for="(item,index) in moreSettings" @click="goPage(item.path)">
+			</view>
+		
+			<view class="">
+				<!-- 更多设置组 -->
+			<view class="group-header" style="margin-top: 20rpx;">更多</view>
+			<view class="item more" v-for="(item,index) in moreSettings" :key=" index + item.name" @click="goPage(item.path)">
 				<view class="item-left">
 					<image class="icon" :src="item.icon" mode="widthFix"></image>
 					<text>{{item.name}}</text>
 				</view>
 				<view class="item-right">
-					<switch v-if="item.switch == 1" checked color="#FFCC33" style="transform:scale(0.7)" />
+					<switch v-if="item.switch == 1"  color="#acf934" @change="switch1Change" checked class="custom-switch" style="transform:scale(0.7)" />
 					<image v-else class="arrow" src="../../static/me/arrow_right_gray.png" mode="widthFix"></image>
 				</view>
 			</view>
+			</view>
+			
 		</view>
 
 		<!-- 版本信息 -->
@@ -53,46 +58,46 @@
 						'name': '账户与安全',
 						'desc': '',
 						'path': '/pages/my/security',
-						'icon': '../../static/me/security.png'
+						'icon': '../../static/me/wd_icon_zhanghuyuanquan.png'
 					},
 					{
 						'name': '基本资料',
 						'desc': '',
 						'path': '/pages/my/editInfo',
-						'icon': '../../static/me/profile.png'
+						'icon': '../../static/me/wd_icon_jibenziliao.png'
 					},
 					{
 						'name': '青少年模式',
 						'switch': 0,
 						'desc': '',
 						'path': '/pages/my/idcheck',
-						'icon': '../../static/me/youth.png'
+						'icon': '../../static/me/wd_icon_qingshaonianmoshi.png'
 					}
 				],
 				moreSettings: [{
 						'name': '通知设置',
 						'desc': '',
 						'path': '/pages/my/pushSet',
-						'icon': '../../static/me/notification.png'
+						'icon': '../../static/me/wd_icon_tonzhishezhi.png'
 					},
 					{
 						'name': '服务条款',
 						'desc': '',
 						'path': '/pages/AboutUs/xieyi',
-						'icon': '../../static/me/terms.png'
+						'icon': '../../static/me/wd_icon_fuwutiaokuan.png'
 					},
 					{
 						'name': '接收内容推荐',
 						'switch': 1,
 						'desc': '',
 						'path': '',
-						'icon': '../../static/me/recommend.png'
+						'icon': '../../static/me/wd_icon_jieshouneirongtuijian.png'
 					},
 					{
 						'name': '联系客服',
 						'desc': '',
 						'path': 'kefu',
-						'icon': '../../static/me/service.png'
+						'icon': '../../static/me/wd_icon_lianxikefu.png'
 					}
 				]
 			}
@@ -121,6 +126,9 @@
 					}
 				});
 			},
+			switch1Change(e){
+				alert(e.detail.value,"改变了")
+			},
 			onBack() {},
 			chkSel() {
 				if (this.sel == 1) {
@@ -284,4 +292,6 @@
 
 <style scoped lang="scss">
 	@import 'setting.scss';
+	
+ 
 </style>