原型

src/App.vue

@@ -1,13 +1,25 @@
 <script>
+	import { userInfo } from './api/user'
 	export default {
 		onLaunch: function() {
 			console.log('App Launch')
+			this.refreshUserInfo()
 		},
 		onShow: function() {
 			console.log('App Show')
 		},
 		onHide: function() {
 			console.log('App Hide')
+		},
+		methods: {
+			/**
+			 * 使用当前token刷新用户信息并更新状态管理
+			 */
+			refreshUserInfo(){
+				userInfo().then(res=>{
+					this.$store.commit('setUserInfo',res)
+				})
+			}
 		}
 	}
 </script>

src/api/index.js

@@ -9,7 +9,7 @@ function before(data){
 	let header = {}
 	//带入token
 	if(store.getters.token){
-		header.authorization = store.getters.token
+		header.authorization = 'Bearer ' + store.getters.token
 	}
 	//带入baseurl
 	option.url = baseUrl + option.url

src/api/user.js

@@ -18,9 +18,9 @@ export function login(username,password){
 /**
  * 获取用户信息接口
  */
-export function userinfo(){
+export function userInfo(){
 	return request({
 		url: '/api/user/info',
-		method: 'POST'
+		method: 'GET'
 	})
 }

src/manifest.json

@@ -2,7 +2,7 @@
     "name" : "Starify",
     "appid" : "__UNI__1763895",
     "description" : "",
-    "versionName" : "1.0.0",
+    "versionName" : "0.0.1",
     "versionCode" : "100",
     "transformPx" : false,
     "app-plus" : {

src/pages.json

@@ -70,6 +70,12 @@
 			"style": {
 				"navigationBarTitleText": "登录"
 			}
+		},
+		{
+			"path": "pages/apps/apps",
+			"style": {
+				"navigationBarTitleText": "所有应用"
+			}
 		}
 	],
 	"globalStyle": {

src/pages/apps/apps.vue

@@ -0,0 +1,22 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>

src/pages/chat/chat.vue

@@ -2,10 +2,109 @@
 	<view class="body">
 		<view class="state-bar"></view>
 		<view class="head">
-			<view class="left"></view>
+			<view class="left">
+				<view class="avatar-cont">
+					<image class="avatar" src="/static/icons/ins.png" ></image>
+					<text class="name">Instagram</text>
+				</view>
+			</view>
 			<view class="center title">聊天</view>
 			<view class="right"></view>
 		</view>
+		<view class="scroll-cont">
+			<scroll-view :scroll-y="true" class="scroll-view">
+				<view class="chat-item">
+					<view class="avatar-cont">
+						<image class="avatar"></image>
+						<view class="bedage">12</view>
+					</view>
+					<view class="text-info">
+						<view class="top">
+							<view class="name">用户111</view>
+							<view class="time">下午 2:40</view>
+						</view>
+						<view class="bottom">
+							<view class="info">是测试用的消息内容哈哈哈哈</view>
+						</view>
+					</view>
+				</view>
+				<view class="chat-item">
+					<view class="avatar-cont">
+						<image class="avatar"></image>
+						<view class="bedage">12</view>
+					</view>
+					<view class="text-info">
+						<view class="top">
+							<view class="name">用户111</view>
+							<view class="time">下午 2:40</view>
+						</view>
+						<view class="bottom">
+							<view class="info">是测试用的消息内容哈哈哈哈</view>
+						</view>
+					</view>
+				</view>
+				<view class="chat-item">
+					<view class="avatar-cont">
+						<image class="avatar"></image>
+						<view class="bedage">12</view>
+					</view>
+					<view class="text-info">
+						<view class="top">
+							<view class="name">用户111</view>
+							<view class="time">下午 2:40</view>
+						</view>
+						<view class="bottom">
+							<view class="info">是测试用的消息内容哈哈哈哈</view>
+						</view>
+					</view>
+				</view>
+				<view class="chat-item">
+					<view class="avatar-cont">
+						<image class="avatar"></image>
+						<view class="bedage">12</view>
+					</view>
+					<view class="text-info">
+						<view class="top">
+							<view class="name">用户111</view>
+							<view class="time">下午 2:40</view>
+						</view>
+						<view class="bottom">
+							<view class="info">是测试用的消息内容哈哈哈哈</view>
+						</view>
+					</view>
+				</view>
+				<view class="chat-item">
+					<view class="avatar-cont">
+						<image class="avatar"></image>
+						<view class="bedage">12</view>
+					</view>
+					<view class="text-info">
+						<view class="top">
+							<view class="name">用户111</view>
+							<view class="time">下午 2:40</view>
+						</view>
+						<view class="bottom">
+							<view class="info">是测试用的消息内容哈哈哈哈</view>
+						</view>
+					</view>
+				</view>
+				<view class="chat-item">
+					<view class="avatar-cont">
+						<image class="avatar"></image>
+						<view class="bedage">12</view>
+					</view>
+					<view class="text-info">
+						<view class="top">
+							<view class="name">用户111</view>
+							<view class="time">下午 2:40</view>
+						</view>
+						<view class="bottom">
+							<view class="info">是测试用的消息内容哈哈哈哈</view>
+						</view>
+					</view>
+				</view>
+			</scroll-view>
+		</view>
 	</view>
 </template>
 
@@ -13,12 +112,104 @@
 	export default {
 		data() {
 			return {
-				
+				chatType:'facebook'
 			};
 		}
 	}
 </script>
 
 <style>
-
+.body{
+	display: grid;
+	grid-template-rows: auto auto 1fr;
+	.head{
+		.left{
+			position: relative;
+			.avatar-cont{
+				display: flex;
+				gap: 12rpx;
+				align-items: center;
+				position: absolute;
+				height: 46rpx;
+				left: 25rpx;
+				top: 50%;
+				transform: translateY(-50%);
+				.avatar{
+					width: 46rpx;
+					height: 46rpx;
+				}
+				.name{
+					font-size: 24rpx;
+				}
+			}
+		}
+	}
+	.scroll-cont{
+		position: relative;
+		width: 100%;
+		height: 100%;
+		.scroll-view{
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			.chat-item{
+				background-color: white;
+				padding: 22rpx 24rpx;
+				display: grid;
+				grid-gap: 24rpx;
+				grid-template-columns: auto 1fr;
+				&:not(:last-child){
+					border-bottom: 1rpx solid #f7f7f7;
+				}
+				&:active{
+					background-color: #f6f6f6;
+				}
+				.avatar-cont{
+					width: 88rpx;
+					height: 88rpx;
+					position: relative;
+					.bedage{
+						transform: translate(30%, -30%);
+						position: absolute;
+						right: 0;
+						top: 0;
+						padding: 2rpx 10rpx;
+						border-radius: 60rpx;
+						background-color: #ff4848;
+						color: white;
+						font-size: 23rpx;
+					}
+					.avatar{
+						display: block;
+						border-radius: 8rpx;
+						background-color: lightgray;
+						width: 100%;
+						height: 100%;
+						position: relative;
+					}
+				}
+				.text-info{
+					padding: 2rpx 0;
+					display: flex;
+					flex-direction: column;
+					justify-content: space-between;
+					.top{
+						display: flex;
+						justify-content: space-between;
+						.time{
+							font-size: 23rpx;
+							color: gray;
+						}
+					}
+					.bottom{
+						font-size: 24rpx;
+						color: gray;
+					}
+				}
+			}
+		}
+	}
+}
 </style>

src/pages/client/client.vue

@@ -6,6 +6,57 @@
 			<view class="center title">线索</view>
 			<view class="right"></view>
 		</view>
+		<view class="search-body">
+			<view class="balance">
+				<view class="balance-cont">
+					<view class="icon iconfont icon-GoogleLogo"></view>
+					<view class="point-cont">500</view>
+					<view class="add iconfont icon-Plus"></view>
+				</view>
+			</view>
+			<view class="center-cont">
+				<view class="bg-ball-1"></view>
+				<view class="bg-ball-2"></view>
+				<view class="logo-text">
+					<image mode="aspectFit" class="logo" src="/static/tab-icon/home-active.png"></image>
+					<view class="title">星光全渠道搜索</view>
+				</view>
+				<view class="search-box-cont">
+					<view class="search-box">
+						<view class="type-item">
+							谷歌搜索
+						</view>
+						<textarea @focus="openConfig(false)" placeholder="请输入搜索关键词" class="input" v-model="keyword"></textarea>
+						<view class="search-line">
+							<view class="history">历史搜索结果</view>
+							<view class="search-button">开始搜索</view>
+						</view>
+					</view>
+				</view>
+				<view class="search-type">
+					<view class="type-item active">
+						<text class="iconfont icon-GoogleLogo"></text>
+						<text class="name">谷歌搜索</text>
+					</view>
+					<view class="type-item">
+						<text class="iconfont icon-MapPin"></text>
+						<text class="name">地图搜索</text>
+					</view>
+					<view class="type-item">
+						<text class="iconfont icon-AppWindow"></text>
+						<text class="name">域名搜索</text>
+					</view>
+					<view class="type-item">
+						<text class="iconfont icon-IdentificationCard"></text>
+						<text class="name">名片搜索</text>
+					</view>
+				</view>
+			</view>
+			<view></view>
+			<view class="search-config">
+				<view @tap="openConfig(!isOpenConfig)" :class="['drag',isOpenConfig?'open':'']"><view class="grag-line"></view></view>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -13,12 +64,267 @@
 	export default {
 		data() {
 			return {
-				
+				keyword: '',
+				isOpenConfig: false
 			};
+		},
+		methods:{
+			/**
+			 * 设定设置栏打开状态
+			 * @param {Boolean} state 设置栏是否展开
+			 */
+			openConfig(state){
+				this.isOpenConfig = state
+			}
 		}
 	}
 </script>
 
-<style>
-
+<style scoped>
+.body{
+	display: grid;
+	grid-template-rows: auto auto 1fr; 
+	.search-body{
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: space-between;
+		gap: 60rpx;
+		.search-config{
+			position: fixed;
+			transition-duration: 300ms;
+			left: 0;
+			bottom: -540rpx;
+			border-radius: 24rpx 24rpx 0 0;
+			box-shadow: 0 0 16rpx 0 #00000011;
+			width: 100%;
+			height: 600rpx;
+			box-sizing: border-box;
+			background-color: #F7F7F7;
+			&:has(.open){
+				bottom: 0;
+			}
+			.drag{
+				width: 100%;
+				height: 60rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				.grag-line{
+					height: 6rpx;
+					width: 6rpx;
+					position: relative;
+					&::after{
+						transition-duration: 300ms;
+						content: '';
+						display: block;
+						position: absolute;
+						border-radius: 6rpx;
+						width: 40rpx;
+						height: 6rpx;
+						background-color: gray;
+						right: 0;
+						top: 0;
+						transform-origin: 100% 50%;
+						rotate: -16deg;
+					}
+					&::before{
+						transition-duration: 300ms;
+						content: '';
+						display: block;
+						position: absolute;
+						border-radius: 6rpx;
+						width: 40rpx;
+						height: 6rpx;
+						background-color: gray;
+						left: 0;
+						top: 0;
+						transform-origin: 0% 50%;
+						rotate: 16deg;
+					}
+				}
+				&.open{
+					bottom: 0;
+					.grag-line{
+						&::after{
+							rotate: 16deg;
+						}
+						&::before{
+							rotate: -16deg;
+						}
+					}
+				}
+			}
+		}
+		.center-cont{
+			position: relative;
+			margin-top: -300rpx;
+			display: flex;
+			flex-direction: column;
+			gap: 30rpx;
+			@media (max-height: 1000rpx) {
+				margin-top: -100rpx;
+			}
+			.bg-ball-1{
+				position: absolute;
+				right: 0;
+				top: 0;
+				width: 200rpx;
+				height: 200rpx;
+				border-radius: 50%;
+				background-color: #C9539A;
+				filter: blur(120rpx);
+			}
+			.bg-ball-2{
+				position: absolute;
+				left: 0;
+				bottom: -100rpx;
+				width: 200rpx;
+				height: 200rpx;
+				border-radius: 50%;
+				background-color: #F09649;
+				filter: blur(120rpx);
+			}
+			.search-type{
+				position: relative;
+				display: flex;
+				gap: 12rpx;
+				.type-item{
+					display: flex;
+					align-items: center;
+					gap: 4rpx;
+					padding: 6rpx 12rpx;
+					padding-right: 16rpx;
+					border: 1rpx solid lightgray;
+					border-radius: 60rpx;
+					background-color: #FFFFFF44;
+					.name{
+						font-size: 24rpx;
+					}
+					.iconfont{
+						font-size: 26rpx;
+					}
+					&.active{
+						border: 1rpx solid #C9539A;
+						color: #C9539A;
+						background-color: #C9539A22;
+					}
+				}
+			}
+			.search-box-cont{
+				position: relative;
+				box-sizing: border-box;
+				width: 700rpx;
+				height: 230rpx;
+				padding: 2rpx;
+				border-radius: 16rpx;
+				background-image: linear-gradient(45deg, #F09649, #C9539A);
+				box-shadow: 0 0 16rpx 0 #C9539A44;
+				.search-box{
+					box-sizing: border-box;
+					padding: 8rpx 16rpx;
+					display: grid;
+					grid-template-columns: auto 1fr;
+					grid-template-rows: 1fr auto;
+					background-color: white;
+					width: 100%;
+					height: 100%;
+					border-radius: 13rpx;
+					.search-line{
+						grid-column: span 2;
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+						margin-bottom: 8rpx;
+						.search-button{
+							color: white;
+							font-size: 26rpx;
+							font-weight: 600;
+							padding: 12rpx 24rpx;
+							border-radius: 60rpx;
+							background-image: linear-gradient(45deg, #F09649, #C9539A);
+						}
+						.history{
+							font-size: 26rpx;
+							margin-left: 8rpx;
+							color: #333333;
+						}
+					}
+					.type-item{
+						height: fit-content;
+						font-weight: 600;
+						color: #C9539A;
+					}
+					.input{
+						box-sizing: border-box;
+						font-size: 27rpx;
+						padding-left: 16rpx;
+						padding-top: 5rpx;
+						width: 100%;
+						height: 100%;
+					}
+				}
+			}
+			.logo-text{
+				position: relative;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				gap: 20rpx;
+				.logo{
+					width: 110rpx;
+					height: 110rpx;
+				}
+				.title{
+					font-size: 36rpx;
+					font-weight: 600;
+					text-align: center;
+					color: transparent;
+					background-image: linear-gradient(45deg, #F09649, #C9539A);
+					-webkit-background-clip: text;
+					background-clip: text;
+					display: inline-block;
+				}
+			}
+		}
+		.balance{
+			position: relative;
+			z-index: 1 ;
+			width: 700rpx;
+			display: flex;
+			justify-content: flex-end;
+			.balance-cont{
+				box-shadow: 0 0 16rpx 0 #F0964944;
+				background-color: #FFFFFF;
+				font-weight: 600;
+				display: flex;
+				align-items: center;
+				padding: 4rpx;
+				padding-right: 6rpx;
+				padding-left: 12rpx;
+				border-radius: 60rpx;
+				gap: 8rpx;
+				border: 3rpx solid #F09649;
+				.point-cont{
+					color: #F09649;
+				}
+				.add{
+					font-size: 28rpx;
+					width: 38rpx;
+					height: 38rpx;
+					border-radius: 50%;
+					color: white;
+					line-height: 38rpx;
+					text-align: center;
+					background-color: #F09649;
+					margin-left: 6rpx;
+				}
+				.icon{
+					font-size: 36rpx;
+					color: #F09649;
+				}
+			}
+		}
+	}
+}
 </style>

src/pages/index/index.vue

@@ -1,11 +1,161 @@
 <template>
 	<view class="body">
+		<view class="color-bg"></view>
 		<view class="state-bar"></view>
 		<view class="head">
 			<view class="left"></view>
 			<view class="center title">星光</view>
 			<view class="right"></view>
 		</view>
+		<div class="search-bar">
+			<input :placeholder="serachKeywords"/><text class="iconfont icon-MagnifyingGlass"></text>
+		</div>
+		<div class="block"></div>
+		<view class="scroll-cont">
+			<scroll-view class="scroll-view" scroll-y="true">
+				<div class="app-list">
+					<navigator url="/pages/user/login" class="login-lock" v-if="!userInfo.token">
+						 <view class="title">登录/注册</view>
+						 <view class="sub-title">解锁您的AI营销黑科技</view>
+					</navigator>
+					<div class="app-item">
+						<div class="icon iconfont icon-GoogleLogo"></div>
+						<div class="name">谷歌搜索</div>
+					</div>
+					<div class="app-item">
+						<div class="icon iconfont icon-MapPin"></div>
+						<div class="name">地图搜索</div>
+					</div>
+					<div class="app-item">
+						<div class="icon iconfont icon-AppWindow"></div>
+						<div class="name">域名搜索</div>
+					</div>
+					<div class="app-item">
+						<div class="icon iconfont icon-IdentificationCard"></div>
+						<div class="name">名片搜索</div>
+					</div>
+					<div class="app-item">
+						<div class="icon iconfont icon-AppWindow"></div>
+						<div class="name">域名搜索</div>
+					</div>
+					<div class="app-item">
+						<div class="icon iconfont icon-IdentificationCard"></div>
+						<div class="name">名片搜索</div>
+					</div>
+					<div class="app-item">
+						<div class="icon iconfont icon-GoogleLogo"></div>
+						<div class="name">谷歌搜索</div>
+					</div>
+					<div class="app-item">
+						<div class="icon iconfont icon-MapPin"></div>
+						<div class="name">地图搜索</div>
+					</div>
+					<div class="app-item">
+						<div class="icon iconfont icon-GoogleLogo"></div>
+						<div class="name">谷歌搜索</div>
+					</div>
+					<div class="app-item">
+						<div class="icon iconfont icon-GridFour"></div>
+						<div class="name">全部应用</div>
+					</div>
+				</div>
+				<swiper :autoplay="true" :circular="true" class="banner">
+					<swiper-item class="banner-item">
+						<image mode="aspectFill" class="banner-image" src="/static/banner/banner1.jpg"></image>
+					</swiper-item>
+					<swiper-item class="banner-item">
+						<image mode="aspectFill" class="banner-image" src="/static/banner/banner1.jpg"></image>
+					</swiper-item>
+					<swiper-item class="banner-item">
+						<image mode="aspectFill" class="banner-image" src="/static/banner/banner1.jpg"></image>
+					</swiper-item>
+				</swiper>
+				<div class="news">
+					<div class="tab-cont">
+						<div class="tabs">
+							<div class="tab-item active">精选</div>
+							<div class="tab-item">热门</div>
+						</div>
+					</div>
+					<div class="news-list">
+						<div class="news-item">
+							<div class="text-info">
+								<div class="title">基于聊天软件跨平台对话营销云,基于聊天软件跨平台对话营销云。</div>
+								<div class="user">星光官方</div>
+							</div>
+							<image mode="aspectFill" class="cover" src="/static/banner/banner1.jpg"></image>
+						</div>
+						<div class="news-item">
+							<div class="text-info">
+								<div class="title">基于聊天软件跨平台对话营销云,基于聊天软件跨平台对话营销云。</div>
+								<div class="user">星光官方</div>
+							</div>
+							<image mode="aspectFill" class="cover" src="/static/banner/banner1.jpg"></image>
+						</div>
+						<div class="news-item">
+							<div class="text-info">
+								<div class="title">基于聊天软件跨平台对话营销云,基于聊天软件跨平台对话营销云。</div>
+								<div class="user">星光官方</div>
+							</div>
+							<image mode="aspectFill" class="cover" src="/static/banner/banner1.jpg"></image>
+						</div>
+						<div class="news-item">
+							<div class="text-info">
+								<div class="title">基于聊天软件跨平台对话营销云,基于聊天软件跨平台对话营销云。</div>
+								<div class="user">星光官方</div>
+							</div>
+							<image mode="aspectFill" class="cover" src="/static/banner/banner1.jpg"></image>
+						</div>
+						<div class="ad-item">
+							<view class="ad-tag">广告</view>
+							<image mode="aspectFill" class="cover" src="/static/banner/banner1.jpg"></image>
+						</div>
+						<div class="news-item">
+							<div class="text-info">
+								<div class="title">基于聊天软件跨平台对话营销云,基于聊天软件跨平台对话营销云。</div>
+								<div class="user">星光官方</div>
+							</div>
+							<image mode="aspectFill" class="cover" src="/static/banner/banner1.jpg"></image>
+						</div>
+						<div class="news-item">
+							<div class="text-info">
+								<div class="title">基于聊天软件跨平台对话营销云,基于聊天软件跨平台对话营销云。</div>
+								<div class="user">星光官方</div>
+							</div>
+							<image mode="aspectFill" class="cover" src="/static/banner/banner1.jpg"></image>
+						</div>
+						<div class="news-item">
+							<div class="text-info">
+								<div class="title">基于聊天软件跨平台对话营销云,基于聊天软件跨平台对话营销云。</div>
+								<div class="user">星光官方</div>
+							</div>
+							<image mode="aspectFill" class="cover" src="/static/banner/banner1.jpg"></image>
+						</div>
+						<div class="news-item">
+							<div class="text-info">
+								<div class="title">基于聊天软件跨平台对话营销云,基于聊天软件跨平台对话营销云。</div>
+								<div class="user">星光官方</div>
+							</div>
+							<image mode="aspectFill" class="cover" src="/static/banner/banner1.jpg"></image>
+						</div>
+						<div class="news-item">
+							<div class="text-info">
+								<div class="title">基于聊天软件跨平台对话营销云,基于聊天软件跨平台对话营销云。</div>
+								<div class="user">星光官方</div>
+							</div>
+							<image mode="aspectFill" class="cover" src="/static/banner/banner1.jpg"></image>
+						</div>
+						<div class="news-item">
+							<div class="text-info">
+								<div class="title">基于聊天软件跨平台对话营销云,基于聊天软件跨平台对话营销云。</div>
+								<div class="user">星光官方</div>
+							</div>
+							<image mode="aspectFill" class="cover" src="/static/banner/banner1.jpg"></image>
+						</div>
+					</div>
+				</div>
+			</scroll-view>
+		</view>
 	</view>
 </template>
 
@@ -14,21 +164,243 @@
 	export default {
 		data() {
 			return {
-				title: 'Hello'
+				title: 'Hello',
+				serachKeywords: ''
 			}
 		},
 		onLoad() {
-
+			this.initSearchKeywords()
 		},
 		methods: {
-		
+			initSearchKeywords() {
+				let keywordList = [
+					'大家都在搜“WhatsApp”',
+					'🔥本周热度飙升“Gemini3”',
+					'大家都在搜“Facebook”',
+					'🔥本周热度飙升“OpenAi”'
+				]
+				let index = 1
+				this.serachKeywords = keywordList[0]
+				setInterval(()=>{
+					this.serachKeywords = this.serachKeywords = keywordList[index]
+					if(index === keywordList.length - 1){
+						index = 0
+					}else{
+						index += 1
+					}
+				},4000)
+			}
 		},
 		computed: {
-			
+			userInfo() {
+				return this.$store.getters.userInfo
+			}
 		}
 	}
 </script>
 
 <style>
-
+.body{
+	position: relative;
+	display: grid;
+	grid-template-rows: auto auto auto auto 1fr;
+	.color-bg{
+		position: absolute;
+		width: 100%;
+		height: 700rpx;
+		left: 0;
+		top: 0;
+		background-image: linear-gradient(190deg,#ffd1af,#EDEDED 70%);
+	}
+	.head{
+		position: relative;
+	}
+	.search-bar{
+		position: relative;
+		box-sizing: border-box;
+		border-radius: 12rpx;
+		display: grid;
+		align-items: center;
+		grid-template-columns: 1fr auto;
+		background-color: white;
+		padding: 20rpx;
+		margin: 0 auto;
+		width: 700rpx;
+		input{
+			box-sizing: border-box;
+			padding: 0 8rpx;
+			font-size: 28rpx;
+		}
+		.icon-MagnifyingGlass{
+			font-size: 34rpx;
+		}
+	}
+	.block{
+		height: 20rpx;
+	}
+	.scroll-cont{
+		position: relative;
+		.scroll-view{
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			.news{
+				box-sizing: border-box;
+				margin-top: 40rpx;
+				background-color: white;
+				width: 100%;
+				.news-list{
+					width: 700rpx;
+					margin: auto;
+					.ad-item{
+						width: 100%;
+						height: 200rpx;
+						position: relative;
+						border-bottom: 1rpx solid #fafafa;
+						.cover{
+							border-radius: 12rpx;
+							width: 100%;
+							height: 100%;
+						}
+						.ad-tag{
+							font-size: 23rpx;
+							color: gray;
+							z-index: 1;
+							position: absolute;
+							right: 20rpx;
+							top: 10rpx;
+						}
+					}
+					.news-item{
+						padding: 30rpx 0;
+						width: 100%;
+						display: grid;
+						grid-template-columns: 1fr 200rpx;
+						grid-gap: 30rpx;
+						.text-info{
+							display: flex;
+							flex-direction: column;
+							justify-content: space-between;
+							.title{
+								font-size: 27rpx;
+							}
+							.user{
+								font-size: 23rpx;
+								color: gray;
+							}
+						}
+						.cover{
+							border-radius: 12rpx;
+							height: 140rpx;
+							width: 200rpx;
+						}
+						&:not(:last-child){
+							border-bottom: 1rpx solid #fafafa;
+						}
+					}
+				}
+				.tab-cont{
+					z-index: 3;
+					padding: 24rpx 0;
+					position: sticky;
+					top: 0;
+					width: 100%;
+					background-color: white;
+					.tabs{
+						width: 700rpx;
+						margin: auto;
+						display: flex;
+						gap: 20rpx;
+						font-weight: 600;
+						.tab-item{
+							font-size: 30rpx;
+							padding: 0 12rpx 4rpx;
+							border-bottom: 6rpx solid transparent;
+							&.active{
+								border-bottom: 6rpx solid #F09649;
+							}
+						}
+					}
+				}
+			}
+			.banner{
+				width: 100%;
+				height: 230rpx;
+				margin-top: 20rpx;
+				background-color: white;
+				.banner-item{
+					width: 100%;
+					aspect-ratio: 5;
+					.banner-image{
+						width: 100%;
+						height: 100%;
+					}
+				}
+			}
+			.app-list{
+				position: relative;
+				width: 700rpx;
+				margin: 10rpx auto;
+				display: grid;
+				grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+				.login-lock{
+					z-index: 2;
+					gap: 4rpx;
+					color: #F09649;
+					border-radius: 12rpx;
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+					align-items: center;
+					background-color: #ffffffdd;
+					position: absolute;
+					width: 100%;
+					height: 100%;
+					.title{
+						font-size: 38rpx;
+						font-weight: 700;
+					}
+					.sub-title{
+						font-size: 26rpx;
+					}
+				}
+				.app-item{
+					padding: 24rpx 6rpx;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					gap: 10rpx;
+					.icon{
+						position: relative;
+						font-size: 54rpx;
+						color: #FFFFFF;
+						&::before{
+							text-shadow: 0 0 4rpx #F09649;
+							z-index: 1;
+							position: relative;
+						}
+						&::after{
+							right: -6rpx;
+							top: -6rpx;
+							content: '';
+							display: block;
+							position: absolute;
+							width: 48rpx;
+							height: 48rpx;
+							filter: blur(16rpx);
+							border-radius: 50%;
+							background-color: #F09649;
+						}
+					}
+					.name{
+						color: #333333;
+						font-size: 23rpx;
+					}
+				}
+			}
+		}
+	}
+}
 </style>

src/pages/user/login.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script>
-	import { login, userinfo } from '@/api/user.js'
+	import { login, userInfo } from '@/api/user.js'
 	export default {
 		data() {
 			return {
@@ -30,19 +30,24 @@
 			 */
 			userLogin(){
 				if(this.username&&this.password&&this.agree){
+					uni.showLoading({
+						title: '登录中',
+						mask: true
+					})
 					login(this.username,this.password).then(res=>{
-						console.log(res)
-						this.$store.commit('setUserInfo',{
-							username: res.username,
-							nickname: res.nick_name,
-							belongUserId: res.belong_user_id,
-							isChildUser: res.is_child_user,
-							token: res.token
-						})
+						this.$store.commit('setUserInfo',res)
+						return userInfo()
+					}).then(res=>{
+						this.$store.commit('setUserInfo',res)
+						uni.hideLoading()
 						uni.navigateBack({
 							delta: 1
 						})
 					}).catch(err=>{
+						uni.hideLoading()
+						uni.showToast({
+							title: '登录失败，请稍后重试。'
+						})
 						console.log(err)
 					})
 				}
@@ -56,14 +61,15 @@
 		padding: 80rpx 40rpx;
 		background-color: white;
 		.title{
-			margin-bottom: 90rpx;
-			width: 460rpx;
-			height: 120rpx;
+			margin-bottom: 80rpx;
+			width: 400rpx;
+			height: 100rpx;
 		}
 		.input{
+			font-size: 28rpx;
 			margin-top: 36rpx;
-			padding: 28rpx 16rpx;
-			border-bottom: 1rpx solid #969696; 
+			padding: 26rpx 16rpx;
+			border-bottom: 1rpx solid #b6b6b6; 
 		}
 		.find-password{
 			margin-top: 30rpx;

src/pages/user/me.vue

@@ -1,12 +1,13 @@
 <template>
 	<scroll-view scroll-y="true" class="body">
 		<view class="user-info">
+			<view class="ball"></view>
 			<view class="state-bar"></view>
 			<view class="avatar-name">
-				<image class="avatar"></image>
+				<image :src="userInfo.avatar" class="avatar"></image>
 				<view v-if="userInfo.token" class="text">
-					<view class="nick-name">{{userInfo.nickname}}</view>
-					<view class="account">{{userInfo.username}}</view>
+					<view class="nick-name">{{userInfo.nick_name}}</view>
+					<view class="company">@{{userInfo.company_short_name}}</view>
 				</view>
 				<view v-else class="text">
 					<navigator url="/pages/user/login" class="nick-name">登录解锁更多功能</navigator>
@@ -15,16 +16,71 @@
 			</view>
 		</view>
 		<view v-if="userInfo.token" class="menu-group">
-			<view class="menu-item"><text>偏好设置</text><text class="iconfont">&#xe63a;</text></view>
-			<view class="menu-item"><text>企业信息</text><text class="iconfont">&#xe63a;</text></view>
-			<view class="menu-item"><text>套餐额度</text><text class="iconfont">&#xe63a;</text></view>
-			<view class="menu-item"><text>消费记录</text><text class="iconfont">&#xe63a;</text></view>
-			<view class="menu-item"><text>设备管理</text><text class="iconfont">&#xe63a;</text></view>
-			<view class="menu-item"><text>账号托管</text><text class="iconfont">&#xe63a;</text></view>
-			<view class="menu-item"><text>修改密码</text><text class="iconfont">&#xe63a;</text></view>
+			<view class="menu-item">
+				<text class="iconfont icon-Gear icon"></text>
+				<text>偏好设置</text>
+				<text class="iconfont icon-right"></text>
+			</view>
+			<view class="menu-item">
+				<text class="iconfont icon-BuildingOffice icon"></text>
+				<text>企业信息</text>
+				<text class="iconfont icon-right"></text>
+			</view>
+			<view class="menu-item">
+				<text class="iconfont icon-Wallet icon"></text>
+				<text>套餐额度</text>
+				<text class="iconfont icon-right"></text>
+			</view>
+			<view class="menu-item">
+				<text class="iconfont icon-CurrencyJpy icon"></text>
+				<text>消费记录</text>
+				<text class="iconfont icon-right"></text>
+			</view>
+			<view class="menu-item">
+				<text class="iconfont icon-DesktopTower icon"></text>
+				<text>设备管理</text>
+				<text class="iconfont icon-right"></text>
+			</view>
+			<view class="menu-item">
+				<text class="iconfont icon-UserPlus icon"></text>
+				<text>账号托管</text>
+				<text class="iconfont icon-right"></text>
+			</view>
+			<view class="menu-item">
+				<text class="iconfont icon-LockOpen icon"></text>
+				<text>修改密码</text>
+				<text class="iconfont icon-right"></text>
+			</view>
 		</view>
+		<navigator url="/pages/user/login" class="login-lock" v-else>
+			<swiper :autoplay="true" :circular="true" :interval="3000" class="login-swiper">
+				<swiper-item class="swiper-item">
+					<view class="login-item">
+						<image mode="aspectFit" class="image" src="/static/tab-icon/client-active.png"></image>
+						<view class="desc">全渠道搜索一个APP搞定</view>
+					</view>
+				</swiper-item>
+				<swiper-item class="swiper-item">
+					<view class="login-item">
+						<image mode="aspectFit" class="image" src="/static/tab-icon/chat-active.png"></image>
+						<view class="desc">全平台聊天一个APP搞定</view>
+					</view>
+				</swiper-item>
+				<swiper-item class="swiper-item">
+					<view class="login-item">
+						<image mode="aspectFit" class="image" src="/static/tab-icon/home-active.png"></image>
+						<view class="desc">全方位营销一个APP搞定</view>
+					</view>
+				</swiper-item>
+			</swiper>
+			 <view class="title">登录/注册</view>
+		</navigator>
 		<view v-if="userInfo.token" class="menu-group">
-			<view @tap="userLogout()" class="menu-item"><text>退出登录</text><text class="iconfont">&#xe63a;</text></view>
+			<view @tap="userLogout()" class="menu-item">
+				<text class="iconfont icon-SignOut icon"></text>
+				<text>退出登录</text>
+				<text class="iconfont icon-right"></text>
+			</view>
 		</view>
 	</scroll-view>
 </template>
@@ -65,30 +121,96 @@
 .body{
 	.menu-group{
 		/* box-shadow: 0 0 6rpx 0 #00000011; */
-		margin-top: 24rpx;
+		margin: 24rpx auto 0; 
+		border-radius: 12rpx;
+		overflow: hidden;
+		width: 700rpx;
 		.menu-item{
 			display: flex;
 			align-items: center;
-			justify-content: space-between;
 			background-color: white;
-			padding: 36rpx 48rpx;
-			.iconfont{
-				color: #949494;
+			padding: 32rpx 40rpx;
+			gap: 40rpx;
+			.icon{
+				font-size: 42rpx;
+				color: #F09649;
+			}
+			.icon-right{
+				margin-left: auto;
+				color: #767676;
 				font-size: 28rpx;
 			}
 			&:active{
 				background-color: #f6f6f6;
 			}
 			&:not(:last-child){
-				border-bottom: 1rpx solid #f0f0f0;
+				border-bottom: 1rpx solid #f7f7f7;
+			}
+		}
+	}
+	.login-lock{
+		gap: 4rpx;
+		color: #F09649;
+		border-radius: 24rpx;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		background-color: #ffffff;
+		position: absolute;
+		width: 700rpx;
+		padding: 60rpx 0;
+		margin: 240rpx 25rpx 0;
+		.login-swiper{
+			pointer-events: none;
+			width: 400rpx;
+			height: 160rpx;
+			.swiper-item{
+				width: 100%;
+				height: 100%;
+				.login-item{
+					width: 100%;
+					height: 100%;
+					display: flex;
+					gap: 26rpx;
+					flex-direction: column;
+					justify-content: space-between;
+					align-items: center;
+					.image{
+						width: 120rpx;
+						height: 120rpx;
+					}
+					.desc{
+						font-size: 26rpx;
+					}
+				}
 			}
 		}
+		.title{
+			font-size: 38rpx;
+			font-weight: 700;
+		}
+
 	}
 	.user-info{
-		/* box-shadow: 0 0 6rpx 0 #00000011; */
-		padding: 160rpx 48rpx 48rpx;
+		overflow: hidden;
+		padding: 130rpx 40rpx 48rpx;
 		background-color: white;
+		position: relative;
+		.ball{
+			pointer-events: none;
+			position: absolute;
+			right: -100rpx;
+			top: -160rpx;
+			width: 600rpx;
+			height: 280rpx;
+			border-radius: 50%;
+			background-color: #F09649;
+			filter: blur(130rpx);
+		}
 		.avatar-name{
+			z-index: 1;
+			position: relative;
 			display: grid;
 			grid-template-columns: auto 1fr;
 			grid-gap: 20px;
@@ -101,16 +223,20 @@
 			.text{
 				display: flex;
 				flex-direction: column;
-				justify-content: space-between;
+				gap: 4rpx;
 				padding: 8rpx 0;
 				.nick-name{
 					font-weight: 600;
-					font-size: 38rpx;
+					font-size: 40rpx;
 				}
 				.account{
-					font-size: 30rpx;
+					font-size: 28rpx;
 					color: #767676;
 				}
+				.company{
+					font-size: 28rpx;
+					color: #F09649;
+				}
 			}
 		}
 	}

src/static/fonts/iconfont.css

@@ -13,6 +13,70 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-Plus:before {
+  content: "\e6bd";
+}
+
+.icon-GridFour:before {
+  content: "\e816";
+}
+
+.icon-AppWindow:before {
+  content: "\e67e";
+}
+
+.icon-IdentificationCard:before {
+  content: "\e724";
+}
+
+.icon-MapPin:before {
+  content: "\e761";
+}
+
+.icon-GoogleLogo:before {
+  content: "\e791";
+}
+
+.icon-ClockCounterClockwise:before {
+  content: "\e797";
+}
+
+.icon-MagnifyingGlass:before {
+  content: "\e7f3";
+}
+
+.icon-LockOpen:before {
+  content: "\e695";
+}
+
+.icon-BuildingOffice:before {
+  content: "\e6ba";
+}
+
+.icon-SignOut:before {
+  content: "\e6e1";
+}
+
+.icon-DesktopTower:before {
+  content: "\e6f9";
+}
+
+.icon-Wallet:before {
+  content: "\e732";
+}
+
+.icon-UserPlus:before {
+  content: "\e754";
+}
+
+.icon-CurrencyJpy:before {
+  content: "\e7a8";
+}
+
+.icon-Gear:before {
+  content: "\e7eb";
+}
+
 .icon-right:before {
   content: "\e63a";
 }

src/store/modules/user.js

@@ -23,11 +23,6 @@ export default {
 		 * 更新用户信息状态
 		 * @param {Object} state
 		 * @param {Object} userInfo
-		 * @param {String} userInfo.username
-		 * @param {String} userInfo.nikename
-		 * @param {String} userInfo.belongUserId
-		 * @param {String} userInfo.isChildUser
-		 * @param {String} userInfo.token
 		 */
 		setUserInfo(state,userInfo){
 			state.userInfo = {