修改样式

components/custom-popup-example.vue

@@ -0,0 +1,151 @@
+<template>
+	<view class="example">
+		<button class="btn" @click="openPopupBottom">底部弹出</button>
+		<button class="btn" @click="openPopupCenter">中间弹出</button>
+		<button class="btn" @click="openPopupTop">顶部弹出</button>
+		<button class="btn" @click="openPopupLeft">左侧弹出</button>
+		<button class="btn" @click="openPopupRight">右侧弹出</button>
+		
+		<!-- 底部弹出示例 -->
+		<custom-popup v-model="showBottom" mode="bottom" @close="closeBottom">
+			<view class="popup-content">
+				<view class="popup-title">底部弹出</view>
+				<view class="popup-text">这是一个底部弹出的示例</view>
+				<button class="popup-btn" @click="closeBottom">关闭弹窗</button>
+			</view>
+		</custom-popup>
+		
+		<!-- 中间弹出示例 -->
+		<custom-popup v-model="showCenter" mode="center" border-radius="20" @close="closeCenter">
+			<view class="popup-content">
+				<view class="popup-title">中间弹出</view>
+				<view class="popup-text">这是一个中间弹出的示例</view>
+				<button class="popup-btn" @click="closeCenter">关闭弹窗</button>
+			</view>
+		</custom-popup>
+		
+		<!-- 顶部弹出示例 -->
+		<custom-popup v-model="showTop" mode="top" @close="closeTop">
+			<view class="popup-content">
+				<view class="popup-title">顶部弹出</view>
+				<view class="popup-text">这是一个顶部弹出的示例</view>
+				<button class="popup-btn" @click="closeTop">关闭弹窗</button>
+			</view>
+		</custom-popup>
+		
+		<!-- 左侧弹出示例 -->
+		<custom-popup v-model="showLeft" mode="left" @close="closeLeft">
+			<view class="popup-content">
+				<view class="popup-title">左侧弹出</view>
+				<view class="popup-text">这是一个左侧弹出的示例</view>
+				<button class="popup-btn" @click="closeLeft">关闭弹窗</button>
+			</view>
+		</custom-popup>
+		
+		<!-- 右侧弹出示例 -->
+		<custom-popup v-model="showRight" mode="right" @close="closeRight">
+			<view class="popup-content">
+				<view class="popup-title">右侧弹出</view>
+				<view class="popup-text">这是一个右侧弹出的示例</view>
+				<button class="popup-btn" @click="closeRight">关闭弹窗</button>
+			</view>
+		</custom-popup>
+	</view>
+</template>
+
+<script>
+import CustomPopup from './custom-popup.vue';
+
+export default {
+	components: {
+		CustomPopup
+	},
+	data() {
+		return {
+			showBottom: false,
+			showCenter: false,
+			showTop: false,
+			showLeft: false,
+			showRight: false
+		}
+	},
+	methods: {
+		// 底部弹出
+		openPopupBottom() {
+			this.showBottom = true;
+		},
+		closeBottom() {
+			this.showBottom = false;
+		},
+		
+		// 中间弹出
+		openPopupCenter() {
+			this.showCenter = true;
+		},
+		closeCenter() {
+			this.showCenter = false;
+		},
+		
+		// 顶部弹出
+		openPopupTop() {
+			this.showTop = true;
+		},
+		closeTop() {
+			this.showTop = false;
+		},
+		
+		// 左侧弹出
+		openPopupLeft() {
+			this.showLeft = true;
+		},
+		closeLeft() {
+			this.showLeft = false;
+		},
+		
+		// 右侧弹出
+		openPopupRight() {
+			this.showRight = true;
+		},
+		closeRight() {
+			this.showRight = false;
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.example {
+	padding: 30rpx;
+	
+	.btn {
+		margin-bottom: 20rpx;
+		background-color: #38C148;
+		color: #FFFFFF;
+	}
+}
+
+.popup-content {
+	padding: 30rpx;
+	
+	.popup-title {
+		font-size: 32rpx;
+		font-weight: bold;
+		margin-bottom: 20rpx;
+		text-align: center;
+	}
+	
+	.popup-text {
+		font-size: 28rpx;
+		color: #666;
+		margin-bottom: 30rpx;
+		text-align: center;
+	}
+	
+	.popup-btn {
+		background-color: #38C148;
+		color: #FFFFFF;
+		border-radius: 10rpx;
+		font-size: 28rpx;
+	}
+}
+</style> 

components/custom-popup.vue

@@ -0,0 +1,276 @@
+<template>
+	<view class="custom-popup" :class="{'custom-popup--show': showPopup}">
+		<!-- 遮罩层 -->
+		<view
+			class="custom-popup__mask"
+			:style="{
+				backgroundColor: maskBackgroundColor,
+				zIndex: zIndex
+			}"
+			:class="{'custom-popup__mask--show': showPopup && mask}"
+			@tap="maskClick"
+			@touchmove.stop.prevent="clear"
+		></view>
+		<!-- 弹出层 -->
+		<view
+			class="custom-popup__container"
+			:class="[
+				`custom-popup__container--${mode}`,
+				showPopup && `custom-popup__container--${mode}--active`,
+			]"
+			:style="{
+				zIndex: zIndex + 1,
+				backgroundColor: bgColor
+			}"
+			@touchmove.stop.prevent="clear"
+		>
+			<!-- 顶部安全区适配 -->
+			<view class="custom-popup__safe-area-inset-top" v-if="safeAreaInsetTop"></view>
+			<!-- 主体内容 -->
+			<view
+				class="custom-popup__content"
+				:class="{'custom-popup__content--round': round}"
+				:style="{
+					width: width ? width : 'auto',
+					borderRadius: mode === 'center' ? borderRadius : 0
+				}"
+			>
+				<slot></slot>
+			</view>
+			<!-- 底部安全区适配 -->
+			<view class="custom-popup__safe-area-inset-bottom" v-if="safeAreaInsetBottom"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'CustomPopup',
+	model: {
+		prop: 'value',
+		event: 'input'
+	},
+	props: {
+		// 是否显示弹窗 (v-model绑定)
+		value: {
+			type: Boolean,
+			default: false
+		},
+		// 弹出方式
+		// top: 顶部弹出
+		// bottom: 底部弹出
+		// center: 中部弹出
+		// left: 左侧弹出
+		// right: 右侧弹出
+		mode: {
+			type: String,
+			default: 'bottom'
+		},
+		// 是否显示遮罩
+		mask: {
+			type: Boolean,
+			default: true
+		},
+		// 点击遮罩是否关闭弹窗
+		maskClosable: {
+			type: Boolean,
+			default: true
+		},
+		// 弹窗背景色
+		bgColor: {
+			type: String,
+			default: '#ffffff'
+		},
+		// 弹窗圆角
+		borderRadius: {
+			type: [String, Number],
+			default: '20rpx'
+		},
+		// 弹窗宽度，mode=center时生效
+		width: {
+			type: String,
+			default: '650rpx'
+		},
+		// 是否显示圆角
+		round: {
+			type: Boolean,
+			default: false
+		},
+		// z-index层级
+		zIndex: {
+			type: [String, Number],
+			default: 10070
+		},
+		// 遮罩的背景色
+		maskBackgroundColor: {
+			type: String,
+			default: 'rgba(0, 0, 0, 0.5)'
+		},
+		// 是否适配底部安全区
+		safeAreaInsetBottom: {
+			type: Boolean,
+			default: true
+		},
+		// 是否适配顶部安全区
+		safeAreaInsetTop: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			showPopup: false
+		}
+	},
+	watch: {
+		value(val) {
+			this.showPopup = val;
+		}
+	},
+	created() {
+		this.showPopup = this.value;
+	},
+	methods: {
+		// 点击遮罩
+		maskClick() {
+			if (this.maskClosable) {
+				this.closePopup();
+			}
+		},
+		// 关闭弹窗
+		closePopup() {
+			this.showPopup = false;
+			this.$emit('input', false);
+			this.$emit('close');
+		},
+		// 防止滚动穿透
+		clear(e) {
+			e.stopPropagation();
+			e.preventDefault();
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.custom-popup {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	visibility: hidden;
+	
+	&__mask {
+		position: fixed;
+		top: 0;
+		left: 0;
+        bottom: 0;
+		width: 100%;
+		height: 100%;
+		opacity: 0;
+		transition: opacity 0.3s;
+		
+		&--show {
+			opacity: 1;
+		}
+	}
+	
+	&__container {
+		position: fixed;
+		transition: all 0.3s ease-in-out;
+		
+		&--center {
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%) scale(0.9);
+			opacity: 0;
+			
+			&--active {
+				transform: translate(-50%, -50%) scale(1);
+				opacity: 1;
+			}
+		}
+		
+		&--bottom {
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			transform: translateY(100%);
+			
+			&--active {
+				transform: translateY(0);
+			}
+		}
+		
+		&--top {
+			top: 0;
+			left: 0;
+			width: 100%;
+			transform: translateY(-100%);
+			
+			&--active {
+				transform: translateY(0);
+			}
+		}
+		
+		&--left {
+			top: 0;
+			left: 0;
+			height: 100%;
+			transform: translateX(-100%);
+			
+			&--active {
+				transform: translateX(0);
+			}
+		}
+		
+		&--right {
+			top: 0;
+			right: 0;
+			height: 100%;
+			transform: translateX(100%);
+			
+			&--active {
+				transform: translateX(0);
+			}
+		}
+	}
+	
+	&__content {
+		position: relative;
+		
+		&--round {
+			border-radius: 20rpx;
+			
+			&::after {
+				content: "";
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 200%;
+				height: 200%;
+				transform: scale(0.5);
+				transform-origin: 0 0;
+				border-radius: 40rpx;
+				pointer-events: none;
+			}
+		}
+	}
+	
+	&__safe-area-inset-top {
+		width: 100%;
+		height: var(--status-bar-height);
+	}
+	
+	&__safe-area-inset-bottom {
+		width: 100%;
+		height: env(safe-area-inset-bottom);
+	}
+	
+	&--show {
+		visibility: visible;
+		z-index: 9999;
+	}
+}
+</style>

pages/home/components/BookItem.vue

@@ -57,6 +57,7 @@
                                 format="HH:mm:ss"
                                 autoStart
                                 color="#db0702"
+                                font-size="24rpx"
                                 separator-color="#db0702"
                                 @finish="onCountdownFinish"
                             ></u-count-down>
@@ -266,7 +267,7 @@ export default {
                 .countdown-wrap {
                     display: flex;
                     align-items: center;
-                    font-size: 22rpx;
+                    font-size: 24rpx !important;
                     color: #db0702;
                     
                     text {

pages/home/components/upsell-book.vue

@@ -1,84 +1,80 @@
 <template>
-  <u-popup v-model="showPopup" mode="center" border-radius="24" width="650rpx" bgColor="transparent">
+  <custom-popup
+    v-model="showPopup"
+    mode="center"
+    border-radius="24"
+    width="650rpx"
+    :bg-color="'transparent'"
+  >
     <view class="popup-container">
-      <image src="/static/img/activity/bg2.png" class="bg-img"></image>
-      <view
-        class="content-container"
-        hover-class="none"
-        hover-stop-propagation="false"
-      >
-        <!-- 顶部黄色手掌图标和标题 -->
-        <view class="header">
-          <!-- <image src="/static/img/activity/hand.png" class="hand-icon"></image> -->
-          <view class="title-text">你真的太幸运了</view>
-          <view class="title-text">恭喜你获得限时加价权益</view>
-        </view>
+      <!-- 顶部黄色手掌图标和标题 -->
+      <view class="header">
+        <!-- <image src="/static/img/activity/hand.png" class="hand-icon"></image> -->
+        <view class="title-text">你真的太幸运了</view>
+        <view class="title-text">恭喜你获得限时加价权益</view>
+      </view>
 
-        <!-- 绿色价格信息区域 -->
-        <view class="price-section">
-          <view class="price-row">
-            <text class="price-label">此书预估书款</text>
-            <text class="price-value">¥ {{ bookInfo.recyclePrice }}</text>
-          </view>
-          <view class="price-row">
-            <text class="price-label">助力成功提升至</text>
-            <text class="price-value increased">¥ {{ upselledMoney }}</text>
-            <image
-              class="up-icon"
-              src="/static/img/activity/up2.png"
-              mode="widthFix"
-            ></image>
-          </view>
-          <view class="small-text"
-            >实际金额以最终审核书款为准，活动时间3/25至4/30</view
-          >
+      <!-- 绿色价格信息区域 -->
+      <view class="price-section">
+        <view class="price-row">
+          <text class="price-label">此书预估书款</text>
+          <text class="price-value">¥ {{ bookInfo.recyclePrice }}</text>
         </view>
-
-        <!-- 分享助力区域 -->
-        <view class="share-section">
-          <view class="share-text">分享一位好友助力</view>
-          <view class="add-button">
-            <image
-              class="hand-icon"
-              src="/static/img/activity/invite.png"
-              mode="widthFix"
-            ></image>
-          </view>
+        <view class="price-row">
+          <text class="price-label">助力成功提升至</text>
+          <text class="price-value increased">¥ {{ upselledMoney }}</text>
+          <image
+            class="up-icon"
+            src="/static/img/activity/up2.png"
+            mode="widthFix"
+          ></image>
         </view>
+        <view class="small-text"
+          >实际金额以最终审核书款为准，活动时间3/25至4/30</view
+        >
+      </view>
 
-        <!-- 分享按钮 -->
-        <view class="action-buttons">
-          <u-button
-            type="primary"
-            class="share-button"
-            @click="shareAction"
-            open-type="share"
-            >立即分享</u-button
-          >
-          <u-button
-            :custom-style="{
-              marginTop: '20rpx',
-              color: '#09bb07',
-              borderColor: '#09bb07',
-            }"
-            plain
-            class="scan-button"
-            @click="scanAction"
-            >扫码助力</u-button
-          >
+      <!-- 分享助力区域 -->
+      <view class="share-section">
+        <view class="share-text">分享一位好友助力</view>
+        <view class="add-button">
+          <image
+            class="hand-icon"
+            src="/static/img/activity/invite.png"
+            mode="widthFix"
+          ></image>
         </view>
       </view>
 
+      <!-- 分享按钮 -->
+      <view class="action-buttons">
+        <button
+          class="share-button"
+          @click="shareAction"
+          open-type="share"
+          >立即分享</button
+        >
+        <button
+          class="scan-button"
+          @click="scanAction"
+          >扫码助力</button
+        >
+      </view>
+
       <!-- 关闭按钮 -->
       <view class="close-button" @click="closePopup">
         <image src="/static/img/activity/close2.png" mode="widthFix"></image>
       </view>
     </view>
-  </u-popup>
+  </custom-popup>
 </template>
 
 <script>
+import customPopup from '../../../components/custom-popup.vue';
 export default {
+  components: {
+    customPopup,
+  },
   data() {
     return {
       showPopup: false,
@@ -87,7 +83,9 @@ export default {
   },
   computed: {
     upselledMoney() {
-      return (this.bookInfo.recyclePrice + this.bookInfo.upsellMoney).toFixed(2);
+      return (this.bookInfo.recyclePrice + this.bookInfo.upsellMoney).toFixed(
+        2
+      );
     },
   },
   methods: {
@@ -114,19 +112,9 @@ export default {
   padding: 30rpx;
   box-sizing: border-box;
   padding-bottom: 50rpx;
-  .bg-img {
-    position: absolute;
-    top: -0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 0;
-  }
-
-  .content-container {
-    position: relative;
-    z-index: 1;
-  }
+  background: url("https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/bg2.png")
+    no-repeat center center;
+  background-size: 100% 100%;
 }
 
 .header {
@@ -134,6 +122,7 @@ export default {
   flex-direction: column;
   align-items: center;
   padding: 20rpx 0 10rpx;
+  padding-top: 160rpx;
 
   .title-text {
     font-size: 38rpx;
@@ -156,7 +145,7 @@ export default {
 }
 
 .price-section {
-  background-color: #09bb07;
+  background-color: #39c248;
   border-radius: 16rpx;
   padding: 20rpx 30rpx;
   margin: 20rpx 0;
@@ -202,7 +191,7 @@ export default {
   margin: 20rpx 0;
 
   .share-text {
-    color: #09bb07;
+    color: #39c248;
     font-size: 32rpx;
     text-align: center;
     margin-bottom: 30rpx;
@@ -226,15 +215,25 @@ export default {
 
   .share-button {
     height: 90rpx;
-    background-color: #09bb07 !important;
-    border-color: #09bb07 !important;
-    margin-bottom: 40rpx;
+    background: linear-gradient(to bottom, #47d46c, #24ad3c) !important;
+    margin-bottom: 24rpx;
     font-size: 32rpx;
+    color: #ffffff;
+    border-radius: 10rpx;
+    line-height: 90rpx;
   }
 
   .scan-button {
     height: 90rpx;
     font-size: 32rpx;
+    color: #39c248;
+    border: 1rpx solid #39c248;
+    background-color: transparent;
+    border-radius: 10rpx;
+    line-height: 90rpx;
+  }
+  button+button{
+    margin-left: 0;
   }
 }
 

pages/home/components/upsell-rules.vue

@@ -1,5 +1,5 @@
 <template>
-  <u-popup v-model="showPopup" mode="center" border-radius="24" width="650rpx">
+  <custom-popup v-model="showPopup" mode="center" border-radius="24" width="650rpx" :bg-color="'transparent'">
     <view class="rules-container">
       <!-- 标题 -->
       <view class="title-section">
@@ -36,12 +36,22 @@
       <u-button class="return-button" type="primary" @click="closePopup"
         >返回活动</u-button
       >
+      
+      <!-- 关闭按钮 -->
+      <view class="close-button" @click="closePopup">
+        <image src="/static/img/activity/close2.png" mode="widthFix"></image>
+      </view>
     </view>
-  </u-popup>
+  </custom-popup>
 </template>
 
 <script>
+import customPopup from "../../../components/custom-popup.vue";
+
 export default {
+  components: {
+    customPopup,
+  },
   data() {
     return {
       showPopup: false,
@@ -60,10 +70,12 @@ export default {
 
 <style lang="scss" scoped>
 .rules-container {
-  background-color: #f1fef1;
   padding: 30rpx;
   border-radius: 24rpx;
   position: relative;
+  background: url("https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/bg.png")
+    no-repeat center center;
+  background-size: 100% 100%;
 }
 
 .title-section {
@@ -87,16 +99,15 @@ export default {
 }
 
 .rules-content {
-  padding: 30rpx;
+  padding: 20rpx;
   background-color: #ffffff;
   border-radius: 16rpx;
-  margin-bottom: 30rpx;
 
   .rule-item {
-    font-size: 28rpx;
+    font-size: 26rpx;
     color: #333;
     line-height: 40rpx;
-    margin-bottom: 10rpx;
+    margin-bottom: 6rpx;
   }
 }
 
@@ -108,4 +119,16 @@ export default {
   border-radius: 100rpx;
   margin-top: 10rpx;
 }
+
+.close-button {
+  position: absolute;
+  bottom: -120rpx;
+  left: 50%;
+  transform: translateX(-50%);
+
+  image {
+    width: 70rpx;
+    height: 70rpx;
+  }
+}
 </style>

pages/home/components/upsell-share.vue

@@ -1,60 +1,72 @@
 <template>
-  <u-popup v-model="showPopup" mode="center" border-radius="24" width="540rpx">
+  <custom-popup
+    v-model="showPopup"
+    mode="center"
+    border-radius="24"
+    width="540rpx"
+    :bg-color="'transparent'"
+  >
     <view class="share-container">
       <!-- 标题 -->
       <view class="title-text">
         <view>好友邀您助力</view>
         <view>提升卖书收入</view>
       </view>
-      
+
       <!-- 活动规则按钮 -->
       <view class="rules-button-container">
-        <u-button class="rules-button" :custom-style="rulesButtonStyle" @click="viewRules">查看活动规则</u-button>
+        <u-button
+          class="rules-button"
+          :custom-style="rulesButtonStyle"
+          @click="viewRules"
+          >查看活动规则</u-button
+        >
       </view>
-      
+
       <!-- 用户信息区域 -->
       <view class="user-info">
         <view class="avatar-container">
           <u-avatar :src="avatarUrl" size="140"></u-avatar>
         </view>
-        <view class="username">{{username}}</view>
+        <view class="username">{{ username }}</view>
       </view>
-      
+
       <!-- 助力按钮 -->
-      <u-button class="help-button" type="primary" :custom-style="helpButtonStyle" @click="handleHelp">点击助力</u-button>
+      <button class="help-button" @click="handleHelp">点击助力</button>
+
+      <!-- 关闭按钮 -->
+      <view class="close-button" @click="close">
+        <image src="/static/img/activity/close2.png" mode="widthFix"></image>
+      </view>
     </view>
-  </u-popup>
+  </custom-popup>
 </template>
 
 <script>
+import customPopup from "../../../components/custom-popup.vue";
+
 export default {
+  components: {
+    customPopup,
+  },
   data() {
     return {
       showPopup: false,
-      avatarUrl: '', // 用户头像URL
-      username: '孙***', // 用户名，带星号
+      avatarUrl: "", // 用户头像URL
+      username: "孙***", // 用户名，带星号
       // 自定义按钮样式
       rulesButtonStyle: {
-        backgroundColor: '#4CD964',
-        color: '#FFFFFF',
-        fontSize: '28rpx',
-        width: '280rpx',
-        height: '80rpx',
-        borderRadius: '40rpx'
+        backgroundColor: "#39c248",
+        color: "#FFFFFF",
+        fontSize: "28rpx",
+        width: "280rpx",
+        height: "80rpx",
+        borderRadius: "40rpx",
       },
-      helpButtonStyle: {
-        backgroundColor: '#4CD964',
-        color: '#FFFFFF',
-        fontSize: '32rpx',
-        width: '100%',
-        height: '100rpx',
-        borderRadius: '50rpx',
-        border: 'none'
-      }
     };
   },
   methods: {
-    open(avatarUrl = '', username = '孙***') {
+    open(avatarUrl = "", username = "孙***") {
       this.avatarUrl = avatarUrl;
       this.username = username;
       this.showPopup = true;
@@ -64,55 +76,57 @@ export default {
     },
     viewRules() {
       // 打开活动规则弹窗
-      this.$emit('view-rules');
+      this.$emit("view-rules");
       this.close();
     },
     handleHelp() {
       // 处理助力逻辑
-      this.$emit('help');
+      this.$emit("help");
       this.close();
-    }
-  }
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 .share-container {
-  background: linear-gradient(180deg, #e9ffe9 0%, #f7fff7 100%);
-  padding: 40rpx 30rpx;
+  position: relative;
+  padding: 40rpx;
   border-radius: 24rpx;
   text-align: center;
+  background: url("https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/bg.png")
+    no-repeat center center;
+  background-size: 100% 100%;
 }
 
-.title-text {
-  font-size: 40rpx;
+.title-text view {
+  font-size: 50rpx;
   font-weight: bold;
   color: #000;
-  line-height: 60rpx;
-  margin-bottom: 20rpx;
 }
 
 .rules-button-container {
   display: flex;
   justify-content: center;
   margin: 20rpx 0 40rpx;
-  
+
   .rules-button {
     position: relative;
-    
-    &::before, &::after {
-      content: '';
+
+    &::before,
+    &::after {
+      content: "";
       position: absolute;
       top: 50%;
       width: 80rpx;
       height: 2rpx;
-      background-color: #4CD964;
+      background-color: #39c248;
     }
-    
+
     &::before {
       left: -90rpx;
     }
-    
+
     &::after {
       right: -90rpx;
     }
@@ -120,8 +134,6 @@ export default {
 }
 
 .user-info {
-  margin-bottom: 40rpx;
-  
   .avatar-container {
     margin: 0 auto 20rpx;
     width: 140rpx;
@@ -129,15 +141,41 @@ export default {
     border-radius: 50%;
     overflow: hidden;
   }
-  
+
   .username {
-    font-size: 32rpx;
+    font-size: 28rpx;
     color: #333;
-    margin-top: 10rpx;
+    background: #39c248;
+    padding: 6rpx 20rpx;
+    border-radius: 30rpx;
+    color: #fff;
+    display: inline-block;
+    position: relative;
+    top: -50rpx;
   }
 }
 
 .help-button {
+  height: 90rpx;
+  background: linear-gradient(to bottom, #47d46c, #24ad3c);
+  font-size: 32rpx;
+  color: #ffffff;
+  border-radius: 10rpx;
+  line-height: 90rpx;
+  width: 100%;
   margin-top: 20rpx;
+  border: none;
+}
+
+.close-button {
+  position: absolute;
+  bottom: -120rpx;
+  left: 50%;
+  transform: translateX(-50%);
+
+  image {
+    width: 70rpx;
+    height: 70rpx;
+  }
 }
 </style>

pages/home/index.vue

@@ -239,7 +239,7 @@ export default {
     let userId = userInfo.userId;
     return {
       title: "书嗨",
-      path: "/pages/home/index?inviteCode=" + userId,
+      path: "/pages/home/index?inviteUserId=" + userId,
       imageUrl: "/static/img/activity/share.jpg",
     };
   },
@@ -250,7 +250,7 @@ export default {
     let userId = userInfo.userId;
     return {
       title: "书嗨",
-      path: "/pages/home/index?inviteCode=" + userId,
+      path: "/pages/home/index?inviteUserId=" + userId,
       imageUrl: "/static/img/activity/share.jpg",
     };
   },