更新

ghsApp/src/admin/home/workbench.vue

@@ -30,20 +30,52 @@
 	<block v-else>
 
 
-  <block v-if="loginStyle  == 0">
-	 <view style="width:100vw;text-align: center;">
-		<!-- #ifdef MP-WEIXIN -->
-		<view style="margin-top:50upx;">
-			<view style="font-size:34upx;margin-bottom:30upx;">花店买花</view>
-			<button class="admin-button-com big blue" style="width:245upx;" @click="buyItem()">去买花</button>
-		</view>
-		<!-- #endif -->
-		<view style="margin-top:100upx;">
-			<view style="font-size:34upx;margin-bottom:30upx;">管理登录</view>
-			<button class="admin-button-com big blue" style="width:245upx;" @click="pageTo({url:'/admin/home/login'})">去登录</button>
-		</view>
-		<view style="margin-top:50upx;"><text style="color:green;font-size:42upx;text-decoration: underline;" @click="pageTo({url:'/pagesClient/official/apply'})">我要注册</text></view>
-		<view style="margin-top:50upx;"><text style="color:green;font-size:42upx;text-decoration: underline;" @click.stop="toPhone()">联系官方</text></view>
+  <block v-if="loginStyle == 0">
+    <view class="guest-page">
+      <view class="guest-hero">
+        <view class="guest-brand">
+          <view class="guest-logo-wrap">
+            <image :src="`${constant.imgUrl}/logo3.png`" class="guest-logo" mode="aspectFit"></image>
+          </view>
+          <text class="guest-brand-name">销花宝</text>
+        </view>
+      </view>
+
+      <view class="guest-body">
+        <!-- #ifdef MP-WEIXIN -->
+        <view class="guest-card">
+          <view class="guest-card-top">
+            <view class="guest-card-icon-wrap guest-card-icon-wrap--buy">
+              <image class="guest-card-icon" :src="`${constant.imgUrl}/ghs/home/icon_caigou.png`" mode="aspectFit"></image>
+            </view>
+            <view class="guest-card-main">
+              <text class="guest-card-title">花店买花</text>
+              <text class="guest-card-desc">前往花掌柜选购花材</text>
+            </view>
+          </view>
+          <button class="guest-card-btn guest-card-btn--outline" @click="buyItem()">去买花</button>
+        </view>
+        <!-- #endif -->
+
+        <view class="guest-card">
+          <view class="guest-card-top">
+            <view class="guest-card-icon-wrap guest-card-icon-wrap--login">
+              <image class="guest-card-icon" :src="`${constant.imgUrl}/ghs/home/icon_ghs.png`" mode="aspectFit"></image>
+            </view>
+            <view class="guest-card-main">
+              <text class="guest-card-title">管理登录</text>
+              <text class="guest-card-desc">登录后台，使用完整管理功能</text>
+            </view>
+          </view>
+          <button class="guest-card-btn guest-card-btn--primary" @click="pageTo({url:'/admin/home/login'})">去登录</button>
+        </view>
+
+        <view class="guest-footer">
+          <text class="guest-footer-link" @click="pageTo({url:'/pagesClient/official/apply'})">我要注册</text>
+          <text class="guest-footer-divider">|</text>
+          <text class="guest-footer-link guest-footer-link--accent" @click.stop="toPhone()">联系官方</text>
+        </view>
+      </view>
     </view>
   </block>
   <block v-else>
@@ -1118,4 +1150,182 @@ export default {
 		flex-shrink: 0;
 	}
 }
+
+.guest-page {
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	background: #f3f6fb;
+}
+
+.guest-hero {
+	padding: 32upx 24upx 24upx;
+	background: linear-gradient(180deg, #e8f0ff 0%, #eef3fb 72%, #f3f6fb 100%);
+}
+
+.guest-brand {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 16upx 0 8upx;
+}
+
+.guest-logo-wrap {
+	width: 120upx;
+	height: 120upx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 24upx;
+	background: #fff;
+	box-shadow: 0 10upx 28upx rgba(51, 133, 255, 0.14);
+}
+
+.guest-logo {
+	width: 96upx;
+	height: 96upx;
+	display: block;
+}
+
+.guest-brand-name {
+	margin-top: 24upx;
+	color: #161819;
+	font-size: 48upx;
+	font-weight: 800;
+	line-height: 56upx;
+}
+
+.guest-brand-desc {
+	margin-top: 10upx;
+	color: #6b737c;
+	font-size: 28upx;
+	line-height: 40upx;
+}
+
+.guest-body {
+	flex: 1;
+	padding: 8upx 24upx 64upx;
+}
+
+.guest-card {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	padding: 32upx 28upx 28upx;
+	background: #fff;
+	border-radius: 24upx;
+	box-shadow: 0 10upx 28upx rgba(24, 37, 50, 0.06);
+}
+
+.guest-card + .guest-card {
+	margin-top: 24upx;
+}
+
+.guest-card-top {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	min-width: 0;
+}
+
+.guest-card-icon-wrap {
+	width: 96upx;
+	height: 96upx;
+	border-radius: 22upx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+}
+
+.guest-card-icon-wrap--buy {
+	background: linear-gradient(135deg, #fff4e8 0%, #ffe8d6 100%);
+}
+
+.guest-card-icon-wrap--login {
+	background: linear-gradient(135deg, #e8f0ff 0%, #d6e8ff 100%);
+}
+
+.guest-card-icon {
+	width: 52upx;
+	height: 52upx;
+}
+
+.guest-card-main {
+	flex: 1;
+	min-width: 0;
+	margin-left: 22upx;
+	text-align: left;
+}
+
+.guest-card-title {
+	display: block;
+	color: #161819;
+	font-size: 34upx;
+	font-weight: 700;
+	line-height: 46upx;
+}
+
+.guest-card-desc {
+	display: block;
+	margin-top: 8upx;
+	color: #8a9199;
+	font-size: 26upx;
+	line-height: 38upx;
+}
+
+.guest-card-btn {
+	width: 100%;
+	margin: 28upx 0 0;
+	padding: 0;
+	min-width: 0;
+	height: 88upx;
+	line-height: 88upx;
+	font-size: 32upx;
+	font-weight: 600;
+	border-radius: 999upx;
+	text-align: center;
+	border: none;
+}
+
+.guest-card-btn::after {
+	border: none;
+}
+
+.guest-card-btn--primary {
+	color: #fff;
+	background: linear-gradient(90deg, #3385ff 0%, #33b0ff 100%);
+	box-shadow: 0 10upx 24upx rgba(51, 133, 255, 0.24);
+}
+
+.guest-card-btn--outline {
+	color: #3385ff;
+	background: #f0f6ff;
+	border: 1upx solid #c8dcff;
+}
+
+.guest-footer {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	margin-top: 40upx;
+}
+
+.guest-footer-link {
+	color: #6b737c;
+	font-size: 34upx;
+	line-height: 40upx;
+}
+
+.guest-footer-divider {
+	margin: 0 20upx;
+	color: #d8dee8;
+	font-size: 24upx;
+}
+
+.guest-footer-link--accent {
+	color: #3385ff;
+	font-weight: 600;
+}
 </style>