app首页页面样式构建

pages/chat/components/messageListItem.vue

@@ -28,8 +28,12 @@
           " mode="aspectFill"></image>
         <template v-if="message.content.indexOf('components|') != -1">
           <view class="message-box" :class="{ admin: message.senderId === UserTypeEnum.ADMIN }">
-            <!-- <component :item="extractAttributes(message.content.split('|')[1])"
-              :is="dynamicComponent(extractComponentName(message.content))" /> -->
+            <template v-if="dynamicComponent(extractComponentName(message.content))">
+              <enterprise-card v-if="extractComponentName(message.content) === 'enterpriseCard'" 
+                :item="extractAttributes(message.content.split('|')[1])" />
+              <enterprise-detail-card v-if="extractComponentName(message.content) === 'enterpriseDetailCard'"
+                :item="extractAttributes(message.content.split('|')[1])" />
+            </template>
           </view>
         </template>
         <template v-else>

pages/chat/index.vue

@@ -307,7 +307,7 @@ const isReconnecting = toRefs(options).isReconnecting; // 重连状态
     position: absolute;
     top: 0;
     left: 0;
-    background-color: #000;
+    background-color: #3A74F2;
     z-index: 1;
   }
 

pages/index/index.vue

@@ -7,9 +7,14 @@
 			<view class="home-top">
 				<image class="disImg" :src="sheep.$url.static('/static/home/homeTop.png')" />
 				<view class="search-box">
-					<u-search placeholder="请输入搜索内容" shape="round" v-model="keyword" :showAction="false"></u-search>
+					<u-search placeholder="请输入搜索内容" @search="onSearch" shape="round" v-model="keyword"
+						:showAction="false"></u-search>
+				</view>
+				<!-- <image class="home-xq" :src="sheep.$url.static('/static/home/homexq.png')" /> -->
+				<view v-for="(item, index) in template.components" :key="index" :styles="item.property.style">
+					<s-block-item v-if="item.id == 'Carousel'" :type="item.id" :data="item.property"
+						:styles="item.property.style" />
 				</view>
-				<image class="home-xq" :src="sheep.$url.static('/static/home/homexq.png')" />
 			</view>
 			<view class="home-container">
 				<com-title title="产品服务" />
@@ -17,10 +22,10 @@
 				<com-title title="服务优势" />
 				<serviceAdvantages />
 				<com-title title="服务案例" />
-				<vi v-for="(item, index) in template.components" :key="index" :styles="item.property.style">
+				<view v-for="(item, index) in template.components" :key="index" :styles="item.property.style">
 					<s-block-item v-if="item.id == 'ProductCard'" :type="item.id" :data="item.property"
 						:styles="item.property.style" />
-				</vi>
+				</view>
 
 			</view>
 		</s-layout>
@@ -92,6 +97,15 @@ onLoad((options) => {
 		sheep.$router.go(decodeURIComponent(options.page));
 	}
 });
+const keyword = ref("")
+const onSearch = (e) => {
+	if (e) {
+		sheep.$router.go('/pages/goods/list', { keyword: e });
+		setTimeout(() => {
+			keyword.value = '';
+		}, 100);
+	}
+}
 
 // 下拉刷新
 onPullDownRefresh(() => {

pages/index/user.vue

@@ -2,9 +2,9 @@
 <template>
   <s-layout title="我的" tabbar="/pages/index/user" navbar="custom" :bgStyle="template.page"
     :navbarStyle="template.navigationBar" onShareAppMessage>
-    <s-block v-for="(item, index) in template.components" :key="index" :styles="item.property.style">
+    <view v-for="(item, index) in template.components" :key="index" :styles="item.property.style">
       <s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
-    </s-block>
+    </view>
   </s-layout>
 </template>
 
@@ -33,4 +33,13 @@ onPullDownRefresh(() => {
 onPageScroll(() => { });
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+:deep(.page-body) {
+  margin-top: -44px !important;
+  position: relative !important;
+  z-index: 20000 !important;
+  // #ifdef MP-WEIXIN
+  padding-top: 44px !important;
+  // #endif
+}
+</style>

sheep/components/s-image-banner/s-image-banner.vue

@@ -1,44 +1,37 @@
 <!-- 装修图文组件：图片轮播 -->
 <template>
-  <su-swiper
-    :list="imgList"
-    :dotStyle="data.indicator === 'dot' ? 'long' : 'tag'"
-    imageMode="scaleToFill"
-    dotCur="bg-mask-40"
-    :seizeHeight="300"
-    :autoplay="data.autoplay"
-    :interval="data.interval * 1000"
-    :mode="data.type"
-  />
+  <su-swiper style="margin: 16px;" height="340" :list="imgList" :dotStyle="data.indicator === 'dot' ? 'long' : 'tag'"
+    imageMode="scaleToFill" dotCur="bg-mask-40" :seizeHeight="300" :autoplay="data.autoplay"
+    :interval="data.interval * 1000" :mode="data.type" />
 </template>
 
 <script setup>
-  import { computed } from 'vue';
-  import sheep from '@/sheep';
+import { computed } from 'vue';
+import sheep from '@/sheep';
 
-  // 轮播图
-  const props = defineProps({
-    data: {
-      type: Object,
-      default: () => ({}),
-    },
-    styles: {
-      type: Object,
-      default: () => ({}),
-    },
-  });
+// 轮播图
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+  styles: {
+    type: Object,
+    default: () => ({}),
+  },
+});
 
-  const imgList = computed(() =>
-      props.data.items.map((item) => {
-        const src = item.type === 'img' ? item.imgUrl : item.videoUrl;
-        return {
-          ...item,
-          type: item.type === 'img' ? 'image' : 'video',
-          src: sheep.$url.cdn(src),
-          poster: sheep.$url.cdn(item.imgUrl),
-        };
-      }),
-  );
+const imgList = computed(() =>
+  props.data.items.map((item) => {
+    const src = item.type === 'img' ? item.imgUrl : item.videoUrl;
+    return {
+      ...item,
+      type: item.type === 'img' ? 'image' : 'video',
+      src: sheep.$url.cdn(src),
+      poster: sheep.$url.cdn(item.imgUrl),
+    };
+  }),
+);
 </script>
 
 <style></style>

sheep/components/s-menu-grid/s-menu-grid copy.vue

@@ -0,0 +1,104 @@
+<!-- 装修基础组件：宫格导航 -->
+<template>
+	<view :style="[bgStyle, { marginLeft: `${data.space}px` }]">
+		<uni-grid :showBorder="Boolean(data.border)" :column="data.column">
+			<uni-grid-item v-for="(item, index) in data.list" :key="index" @tap="sheep.$router.go(item.url)">
+				<view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
+					<view class="img-box">
+						<view class="tag-box" v-if="item.badge.show"
+							:style="[{ background: item.badge.bgColor, color: item.badge.textColor }]">
+							{{ item.badge.text }}
+						</view>
+						<image class="menu-image" :src="sheep.$url.cdn(item.iconUrl)"></image>
+					</view>
+
+					<view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center">
+						<view class="grid-text" :style="[{ color: item.titleColor }]">
+							{{ item.title }}
+						</view>
+						<view class="grid-tip" :style="[{ color: item.subtitleColor }]">
+							{{ item.subtitle }}
+						</view>
+					</view>
+				</view>
+			</uni-grid-item>
+		</uni-grid>
+	</view>
+
+</template>
+
+<script setup>
+import sheep from '@/sheep';
+import {
+	computed
+} from 'vue';
+
+const props = defineProps({
+	// 装修数据
+	data: {
+		type: Object,
+		default: () => ({}),
+	},
+	// 装修样式
+	styles: {
+		type: Object,
+		default: () => ({}),
+	},
+});
+// 设置背景样式
+const bgStyle = computed(() => {
+	// 直接从 props.styles 解构
+	const {
+		bgType,
+		bgImg,
+		bgColor
+	} = props.styles;
+
+	// 根据 bgType 返回相应的样式
+	return {
+		background: bgType === 'img' ? `url(${bgImg}) no-repeat top center / 100% 100%` : bgColor
+	};
+});
+</script>
+
+<style lang="scss" scoped>
+.menu-image {
+	width: 24px;
+	height: 24px;
+}
+
+.grid-item-box {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+
+	.img-box {
+		position: relative;
+
+		.tag-box {
+			position: absolute;
+			z-index: 2;
+			top: 0;
+			right: 0;
+			font-size: 2em;
+			line-height: 1;
+			padding: 0.4em 0.6em 0.3em;
+			transform: scale(0.4) translateX(0.5em) translatey(-0.6em);
+			transform-origin: 100% 0;
+			border-radius: 200rpx;
+			white-space: nowrap;
+		}
+	}
+
+	.title-box {
+		.grid-tip {
+			font-size: 24rpx;
+			white-space: nowrap;
+			text-align: center;
+		}
+	}
+}
+</style>

sheep/components/s-menu-grid/s-menu-grid.vue

@@ -1,6 +1,34 @@
 <!-- 装修基础组件：宫格导航 -->
 <template>
-	<view :style="[bgStyle, { marginLeft: `${data.space}px` }]">
+	<view class="user-tools">
+		<view class="tools-header">
+			<text class="tools-title">常用工具</text>
+			<view class="tools-grid">
+				<view class="tools-item" @tap="sheep.$router.go(item.url)" v-for="(item, index) in data.list.slice(0, 4)"
+					:key="index">
+					<image class="tools-icon" :src="sheep.$url.cdn(item.iconUrl)" mode="aspectFit" />
+					<text class="tools-text">{{ item.title }}</text>
+				</view>
+			</view>
+		</view>
+	</view>
+	<div class="container">
+		<div class="menu-list">
+			<div class="menu-item" @tap="sheep.$router.go(item.url)" v-for="(item, index) in data.list.slice(4)" :key="index">
+				<div class="menu-row">
+					<div class="menu-title">
+						<img class="icon" :src="sheep.$url.cdn(item.iconUrl)" />
+						<text class="text">{{ item.title }}</text>
+					</div>
+					<img class="arrow"
+						src="https://seal-img.nos-jd.163yun.com/obj/w5rCgMKVw6DCmGzCmsK-/60938800883/9099/a51c/4f35/ba4922804bc38ca1168b7b3577ddf938.png" />
+				</div>
+				<div class="divider" v-if="index !== data.list.slice(4).length - 1"></div>
+			</div>
+		</div>
+	</div>
+	<!-- <view :style="[bgStyle, { marginLeft: `${data.space}px` }]">
+
 		<uni-grid :showBorder="Boolean(data.border)" :column="data.column">
 			<uni-grid-item v-for="(item, index) in data.list" :key="index" @tap="sheep.$router.go(item.url)">
 				<view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
@@ -23,7 +51,7 @@
 				</view>
 			</uni-grid-item>
 		</uni-grid>
-	</view>
+	</view> -->
 
 </template>
 
@@ -45,59 +73,123 @@ const props = defineProps({
 		default: () => ({}),
 	},
 });
-// 设置背景样式
-const bgStyle = computed(() => {
-	// 直接从 props.styles 解构
-	const {
-		bgType,
-		bgImg,
-		bgColor
-	} = props.styles;
-
-	// 根据 bgType 返回相应的样式
-	return {
-		background: bgType === 'img' ? `url(${bgImg}) no-repeat top center / 100% 100%` : bgColor
-	};
-});
+
 </script>
 
 <style lang="scss" scoped>
-.menu-image {
-	width: 24px;
-	height: 24px;
+.user-tools {
+	width: calc(100% - 32px);
+	padding: 24rpx;
+	border-radius: 16rpx;
+	background-color: #fff;
+	box-sizing: border-box;
+	margin: 16px;
+
+	.tools-header {
+		position: relative;
+		width: 620rpx;
+		height: 190rpx;
+	}
+
+	.tools-title {
+		font-size: 32rpx;
+		font-family: 'Source Han Sans';
+		font-weight: 600;
+		line-height: 46rpx;
+		color: #333;
+	}
+
+	.tools-grid {
+		position: absolute;
+		left: 16rpx;
+		bottom: 0;
+		right: 0;
+		display: flex;
+		align-items: center;
+		gap: 52rpx;
+	}
+
+	.tools-item {
+		width: 112rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 8rpx;
+		font-size: 28rpx;
+		font-family: 'Source Han Sans';
+		font-weight: 400;
+		line-height: 40rpx;
+		color: #333;
+	}
+
+	.tools-icon {
+		width: 64rpx;
+		height: 64rpx;
+	}
+
+	.tools-text {
+		flex-shrink: 0;
+	}
 }
 
-.grid-item-box {
-	flex: 1;
+.container {
 	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	height: 100%;
+	padding: 32rpx;
+	border-radius: 16rpx;
+	background-color: #ffffff;
+	margin: 16px;
 
-	.img-box {
-		position: relative;
+	.menu-list {
+		display: flex;
+		flex-direction: column;
+		gap: 32rpx;
+		width: 100%;
 
-		.tag-box {
-			position: absolute;
-			z-index: 2;
-			top: 0;
-			right: 0;
-			font-size: 2em;
-			line-height: 1;
-			padding: 0.4em 0.6em 0.3em;
-			transform: scale(0.4) translateX(0.5em) translatey(-0.6em);
-			transform-origin: 100% 0;
-			border-radius: 200rpx;
-			white-space: nowrap;
-		}
-	}
+		.menu-item {
+			display: flex;
+			flex-direction: column;
+			align-items: flex-end;
+			gap: 32rpx;
+			width: 622rpx;
+
+			.menu-row {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				width: 100%;
+
+				.menu-title {
+					display: flex;
+					align-items: center;
+					gap: 16rpx;
+					font-size: 28rpx;
+					font-family: 'Source Han Sans';
+					line-height: 40rpx;
+					color: #333333;
+
+					.icon {
+						width: 48rpx;
+						height: 48rpx;
+						flex-shrink: 0;
+					}
+
+					.text {
+						flex-shrink: 0;
+					}
+				}
+
+				.arrow {
+					width: 32rpx;
+					height: 32rpx;
+					flex-shrink: 0;
+				}
+			}
 
-	.title-box {
-		.grid-tip {
-			font-size: 24rpx;
-			white-space: nowrap;
-			text-align: center;
+			.divider {
+				width: 558rpx;
+				height: 1rpx;
+				background-color: #ebedf0;
+			}
 		}
 	}
 }

sheep/components/s-user-card/s-user-card copy.vue

@@ -0,0 +1,185 @@
+<!-- 装修用户组件：用户卡片 -->
+<template>
+  <view class="ss-user-info-wrap ss-p-t-50" :style="[bgStyle, { marginLeft: `${data.space}px` }]">
+    <view class="ss-flex ss-col-center ss-row-between ss-m-b-20">
+      <view class="left-box ss-flex ss-col-center ss-m-l-36">
+        <view class="avatar-box ss-m-r-24">
+          <imag e class="avatar-img" :src="
+              isLogin
+                ? sheep.$url.cdn(userInfo.avatar)
+                : sheep.$url.static('/static/img/shop/default_avatar.png')"
+                 mode="aspectFill" @tap="sheep.$router.go('/pages/user/info')">
+          </imag>
+        </view>
+        <view>
+          <view class="nickname-box ss-flex ss-col-center">
+            <view class="nick-name ss-m-r-20">{{ userInfo?.nickname || nickname }}</view>
+          </view>
+        </view>
+      </view>
+      <view class="right-box ss-m-r-52">
+        <button class="ss-reset-button" @tap="showShareModal">
+          <text class="sicon-qrcode"></text>
+        </button>
+      </view>
+    </view>
+
+    <!-- 提示绑定手机号 先隐藏 yudao 需要再修改 -->
+    <view
+      class="bind-mobile-box ss-flex ss-row-between ss-col-center"
+      v-if="isLogin && !userInfo.mobile"
+    > 
+      <view class="ss-flex">
+        <text class="cicon-mobile-o" />
+        <view class="mobile-title ss-m-l-20"> 点击绑定手机号确保账户安全</view>
+      </view>
+      <button class="ss-reset-button bind-btn" @tap="onBind">去绑定</button>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  /**
+   * 用户卡片
+   *
+   * @property {Number} leftSpace                  - 容器左间距
+   * @property {Number} rightSpace                  - 容器右间距
+   *
+   * @property {String} avatar          - 头像
+   * @property {String} nickname          - 昵称
+   * @property {String} vip              - 等级
+   * @property {String} collectNum        - 收藏数
+   * @property {String} likeNum          - 点赞数
+   *
+   *
+   */
+  import { computed } from 'vue';
+  import sheep from '@/sheep';
+  import {
+    showShareModal,
+    showAuthModal,
+  } from '@/sheep/hooks/useModal';
+
+  // 用户信息
+  const userInfo = computed(() => sheep.$store('user').userInfo);
+  console.log('用户信息', userInfo);
+
+  // 是否登录
+  const isLogin = computed(() => sheep.$store('user').isLogin);
+  // 接收参数
+  const props = defineProps({
+    // 装修数据
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+    // 装修样式
+    styles: {
+      type: Object,
+      default: () => ({}),
+    },
+    // 头像
+    avatar: {
+      type: String,
+      default: '',
+    },
+    nickname: {
+      type: String,
+      default: '请先登录',
+    },
+    vip: {
+      type: [String, Number],
+      default: '1',
+    },
+    collectNum: {
+      type: [String, Number],
+      default: '1',
+    },
+    likeNum: {
+      type: [String, Number],
+      default: '1',
+    },
+  });
+
+  // 设置背景样式
+  const bgStyle = computed(() => {
+    // 直接从 props.styles 解构
+    const { bgType, bgImg, bgColor } = props.styles;
+
+    // 根据 bgType 返回相应的样式
+    return {
+      background: bgType === 'img'
+        ? `url(${bgImg}) no-repeat top center / 100% 100%`
+        : bgColor,
+    };
+  });
+
+  // 绑定手机号
+  function onBind() {
+    showAuthModal('changeMobile');
+  }
+</script>
+
+<style lang="scss" scoped>
+  .ss-user-info-wrap {
+    box-sizing: border-box;
+
+    .avatar-box {
+      width: 100rpx;
+      height: 100rpx;
+      border-radius: 50%;
+      overflow: hidden;
+
+      .avatar-img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .nick-name {
+      font-size: 34rpx;
+      font-weight: 400;
+      color: #333333;
+      line-height: normal;
+    }
+
+    .vip-img {
+      width: 30rpx;
+      height: 30rpx;
+    }
+
+    .sicon-qrcode {
+      font-size: 40rpx;
+    }
+  }
+
+  .bind-mobile-box {
+    width: 100%;
+    height: 84rpx;
+    padding: 0 34rpx 0 44rpx;
+    box-sizing: border-box;
+    background: #ffffff;
+    box-shadow: 0px -8rpx 9rpx 0px rgba(#e0e0e0, 0.3);
+
+    .cicon-mobile-o {
+      font-size: 30rpx;
+      color: #ff690d;
+    }
+
+    .mobile-title {
+      font-size: 24rpx;
+      font-weight: 500;
+      color: #ff690d;
+    }
+
+    .bind-btn {
+      width: 100rpx;
+      height: 50rpx;
+      background: #ff6100;
+      border-radius: 25rpx;
+      font-size: 24rpx;
+      font-weight: 500;
+      color: #ffffff;
+    }
+  }
+</style>

sheep/components/s-user-card/s-user-card.vue

@@ -4,12 +4,11 @@
     <view class="ss-flex ss-col-center ss-row-between ss-m-b-20">
       <view class="left-box ss-flex ss-col-center ss-m-l-36">
         <view class="avatar-box ss-m-r-24">
-          <imag e class="avatar-img" :src="
-              isLogin
-                ? sheep.$url.cdn(userInfo.avatar)
-                : sheep.$url.static('/static/img/shop/default_avatar.png')"
-                 mode="aspectFill" @tap="sheep.$router.go('/pages/user/info')">
-          </imag>
+          <image class="avatar-img" :src="isLogin
+            ? sheep.$url.cdn(userInfo.avatar)
+            : sheep.$url.static('/static/img/shop/default_avatar.png')" mode="aspectFill"
+            @tap="sheep.$router.go('/pages/user/info')">
+          </image>
         </view>
         <view>
           <view class="nickname-box ss-flex ss-col-center">
@@ -23,12 +22,23 @@
         </button>
       </view>
     </view>
+    <view class="sign-card">
+      <image class="sign-card__bg-img"
+        src="https://seal-img.nos-jd.163yun.com/obj/w5rCgMKVw6DCmGzCmsK-/60938586057/a6c7/0b14/00ec/e47d6346bcc8c5764ca7a85c4da7736f.png" />
+      <view class="sign-card__content">
+        <view class="sign-card__info">
 
+          <view class="sign-card__title">
+            <image class="sign-card__icon" :src="sheep.$url.static('/static/user/qd.png')" />
+            <text class="sign-card__text">每日签到</text>
+          </view>
+          <text class="sign-card__desc">积分可在购物时抵扣现金结算</text>
+        </view>
+        <text class="sign-card__btn" @tap="sheep.$router.go('/pages/app/sign')">立即签到</text>
+      </view>
+    </view>
     <!-- 提示绑定手机号 先隐藏 yudao 需要再修改 -->
-    <view
-      class="bind-mobile-box ss-flex ss-row-between ss-col-center"
-      v-if="isLogin && !userInfo.mobile"
-    > 
+    <view class="bind-mobile-box ss-flex ss-row-between ss-col-center" v-if="isLogin && !userInfo.mobile">
       <view class="ss-flex">
         <text class="cicon-mobile-o" />
         <view class="mobile-title ss-m-l-20"> 点击绑定手机号确保账户安全</view>
@@ -39,147 +49,227 @@
 </template>
 
 <script setup>
-  /**
-   * 用户卡片
-   *
-   * @property {Number} leftSpace                  - 容器左间距
-   * @property {Number} rightSpace                  - 容器右间距
-   *
-   * @property {String} avatar          - 头像
-   * @property {String} nickname          - 昵称
-   * @property {String} vip              - 等级
-   * @property {String} collectNum        - 收藏数
-   * @property {String} likeNum          - 点赞数
-   *
-   *
-   */
-  import { computed } from 'vue';
-  import sheep from '@/sheep';
-  import {
-    showShareModal,
-    showAuthModal,
-  } from '@/sheep/hooks/useModal';
-
-  // 用户信息
-  const userInfo = computed(() => sheep.$store('user').userInfo);
-  console.log('用户信息', userInfo);
-
-  // 是否登录
-  const isLogin = computed(() => sheep.$store('user').isLogin);
-  // 接收参数
-  const props = defineProps({
-    // 装修数据
-    data: {
-      type: Object,
-      default: () => ({}),
-    },
-    // 装修样式
-    styles: {
-      type: Object,
-      default: () => ({}),
-    },
-    // 头像
-    avatar: {
-      type: String,
-      default: '',
-    },
-    nickname: {
-      type: String,
-      default: '请先登录',
-    },
-    vip: {
-      type: [String, Number],
-      default: '1',
-    },
-    collectNum: {
-      type: [String, Number],
-      default: '1',
-    },
-    likeNum: {
-      type: [String, Number],
-      default: '1',
-    },
-  });
-
-  // 设置背景样式
-  const bgStyle = computed(() => {
-    // 直接从 props.styles 解构
-    const { bgType, bgImg, bgColor } = props.styles;
-
-    // 根据 bgType 返回相应的样式
-    return {
-      background: bgType === 'img'
-        ? `url(${bgImg}) no-repeat top center / 100% 100%`
-        : bgColor,
-    };
-  });
-
-  // 绑定手机号
-  function onBind() {
-    showAuthModal('changeMobile');
-  }
+/**
+ * 用户卡片
+ *
+ * @property {Number} leftSpace                  - 容器左间距
+ * @property {Number} rightSpace                  - 容器右间距
+ *
+ * @property {String} avatar          - 头像
+ * @property {String} nickname          - 昵称
+ * @property {String} vip              - 等级
+ * @property {String} collectNum        - 收藏数
+ * @property {String} likeNum          - 点赞数
+ *
+ *
+ */
+import { computed } from 'vue';
+import sheep from '@/sheep';
+import {
+  showShareModal,
+  showAuthModal,
+} from '@/sheep/hooks/useModal';
+
+// 用户信息
+const userInfo = computed(() => sheep.$store('user').userInfo);
+console.log('用户信息', userInfo);
+
+// 是否登录
+const isLogin = computed(() => sheep.$store('user').isLogin);
+// 接收参数
+const props = defineProps({
+  // 装修数据
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+  // 装修样式
+  styles: {
+    type: Object,
+    default: () => ({}),
+  },
+  // 头像
+  avatar: {
+    type: String,
+    default: '',
+  },
+  nickname: {
+    type: String,
+    default: '请先登录',
+  },
+  vip: {
+    type: [String, Number],
+    default: '1',
+  },
+  collectNum: {
+    type: [String, Number],
+    default: '1',
+  },
+  likeNum: {
+    type: [String, Number],
+    default: '1',
+  },
+});
+
+// 设置背景样式
+const bgStyle = computed(() => {
+  // 直接从 props.styles 解构
+  const { bgType, bgImg, bgColor } = props.styles;
+
+  // 根据 bgType 返回相应的样式
+  return {
+    background: bgType === 'img'
+      ? `url(${bgImg}) no-repeat top center / 100% 100%`
+      : bgColor,
+  };
+});
+
+// 绑定手机号
+function onBind() {
+  showAuthModal('changeMobile');
+}
 </script>
 
 <style lang="scss" scoped>
-  .ss-user-info-wrap {
-    box-sizing: border-box;
-
-    .avatar-box {
-      width: 100rpx;
-      height: 100rpx;
-      border-radius: 50%;
-      overflow: hidden;
-
-      .avatar-img {
-        width: 100%;
-        height: 100%;
-      }
-    }
+.sign-card {
+  position: relative;
+  width: calc(100% - 32px);
+  height: auto;
+  overflow: hidden;
+  border-radius: 8px;
+  background: linear-gradient(268.29deg, #2d3057 5.97%, #3f446f 87.85%);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  min-height: 85px;
+  margin: 0 16px;
 
-    .nick-name {
-      font-size: 34rpx;
-      font-weight: 400;
-      color: #333333;
-      line-height: normal;
-    }
+  &__bg-img {
+    width: 230px;
+    height: 225px;
+    position: absolute;
+    transform: rotate(34deg);
+    object-fit: cover;
+    right: -124px;
+    bottom: -131px;
+  }
 
-    .vip-img {
-      width: 30rpx;
-      height: 30rpx;
-    }
+  &__content {
+    position: absolute;
+    top: 6px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    gap: 83px;
+    width: max-content;
+    height: max-content;
+    margin: auto;
+  }
 
-    .sicon-qrcode {
-      font-size: 40rpx;
-    }
+  &__info {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
   }
 
-  .bind-mobile-box {
-    width: 100%;
-    height: 84rpx;
-    padding: 0 34rpx 0 44rpx;
-    box-sizing: border-box;
-    background: #ffffff;
-    box-shadow: 0px -8rpx 9rpx 0px rgba(#e0e0e0, 0.3);
-
-    .cicon-mobile-o {
-      font-size: 30rpx;
-      color: #ff690d;
-    }
+  &__desc {
+    font-size: 12px;
+    font-family: 'PingFang SC';
+    line-height: 17px;
+    color: rgba(255, 255, 255, 0.4);
+    white-space: pre;
+  }
 
-    .mobile-title {
-      font-size: 24rpx;
-      font-weight: 500;
-      color: #ff690d;
-    }
+  &__title {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 16px;
+    font-family: 'PingFang SC';
+    line-height: 22px;
+    color: #ffffff;
+    white-space: pre;
+  }
 
-    .bind-btn {
-      width: 100rpx;
-      height: 50rpx;
-      background: #ff6100;
-      border-radius: 25rpx;
-      font-size: 24rpx;
-      font-weight: 500;
-      color: #ffffff;
+  &__icon {
+    width: 25px;
+    height: 25px;
+    // margin: -34px 0 4px 0;
+  }
+
+  &__btn {
+    padding: 4px 12px;
+    border-radius: 286px;
+    background-color: #ffffff;
+    font-size: 12px;
+    font-family: 'PingFang SC';
+    line-height: 16px;
+    color: #31345c;
+    white-space: pre;
+  }
+}
+
+.ss-user-info-wrap {
+  box-sizing: border-box;
+
+  .avatar-box {
+    width: 100rpx;
+    height: 100rpx;
+    border-radius: 50%;
+    overflow: hidden;
+
+    .avatar-img {
+      width: 100%;
+      height: 100%;
     }
   }
+
+  .nick-name {
+    font-size: 34rpx;
+    font-weight: 400;
+    color: #333333;
+    line-height: normal;
+  }
+
+  .vip-img {
+    width: 30rpx;
+    height: 30rpx;
+  }
+
+  .sicon-qrcode {
+    font-size: 40rpx;
+  }
+}
+
+.bind-mobile-box {
+  width: 100%;
+  height: 84rpx;
+  padding: 0 34rpx 0 44rpx;
+  box-sizing: border-box;
+  background: #ffffff;
+  box-shadow: 0px -8rpx 9rpx 0px rgba(#e0e0e0, 0.3);
+
+  .cicon-mobile-o {
+    font-size: 30rpx;
+    color: #ff690d;
+  }
+
+  .mobile-title {
+    font-size: 24rpx;
+    font-weight: 500;
+    color: #ff690d;
+  }
+
+  .bind-btn {
+    width: 100rpx;
+    height: 50rpx;
+    background: #ff6100;
+    border-radius: 25rpx;
+    font-size: 24rpx;
+    font-weight: 500;
+    color: #ffffff;
+  }
+}
 </style>

sheep/scss/_var.scss

@@ -1,7 +1,7 @@
 @import './mixins';
 
 //颜色 ，渐变背景60%
-$red: #d10019;      // 中国红
+$red: #3A74F2;      // 中国红
 $orange: #f37b1d;   // 桔橙
 $gold: #fbbd08;     // 明黄
 $green: #8dc63f;    // 橄榄绿