style: 文案和样式修改

2025-12-23 15:52:20 +08:00
parent 8e73c90746
commit 9310761a5d
12 changed files with 155 additions and 122 deletions
--- a/src/views/asistant/components/NoticeItem.vue
+++ b/src/views/asistant/components/NoticeItem.vue
@@ -2,7 +2,7 @@
  <div class="chat-message" :class="{ 'user-message': isMyself, 'ai-message': !isMyself }">
    <!-- AI消息显示头像 -->
    <div v-if="!isMyself" class="chat-avatar">
-      <img src="@/assets/images/asistant.png" alt="AI Avatar" />
+      <img class="avatar" :src="thumb" alt="AI Avatar" />
    </div>

    <!-- 消息内容 -->
@@ -27,9 +27,15 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import MarkdownIt from 'markdown-it'
+import { useUserInfoStore } from '@/stores'

 const md = new MarkdownIt()

+const userInfoStore = useUserInfoStore()
+const thumb = computed(() => {
+  return userInfoStore.state.generateParams.stylistImage
+})
+
 // 定义消息类型
 interface ChatMessage {
  sessionId: string | number
@@ -133,16 +139,17 @@ const actionList: ActionItem[] = [

 .chat-avatar {
  width: 7.8rem;
-  height: 7.4rem;
+  height: 7.8rem;
  border-radius: 50%;
  margin-right: 1.88rem;
-  border: .2rem solid #000;
-  padding: 1.4rem;
+  overflow: hidden;
+  // border: 0.2rem solid #000;
+  // padding: 1.4rem;

  img {
-    width: 4.9rem;
-    height: 4.9rem;
-    border-radius: 50%;
+    width: 100%;
+    // height: 100%;
+    // border-radius: 50%;
    // object-fit: cover;
  }
 }
--- a/src/views/asistant/index.vue
+++ b/src/views/asistant/index.vue
@@ -14,7 +14,7 @@
    <div class="footer">
      <InputArea @send-message="handleSendMessage" />
      <div class="continue flex">
-        <div class="btn flex flex-center" @click="handleContinue">Continue</div>
+        <div class="btn flex flex-center" @click="handleContinue">Generate</div>
      </div>
    </div>
  </div>
@@ -272,7 +272,7 @@ const handleContinue = () => {
 </script>
 <style lang="less" scoped>
 .asistant-container {
-  height: 100vh;
+  height: 100%;
  overflow: hidden;
 }

--- a/src/views/login/LoginPage.vue
+++ b/src/views/login/LoginPage.vue
@@ -2,13 +2,16 @@
  <div class="login-page">
    <div class="content">
      <div class="back-button" @click="goBack">
-         <SvgIcon name="left" size="50" color="#fff" />
+        <SvgIcon name="left" size="50" color="#fff" />
      </div>

      <div class="header">
-        <div class="title">Log in.</div>
-        <p class="subtitle">Redefine the styling experience with AI.</p>
-        <p class="subtitle">Use Styling Angel to speed up your fashion journey.</p>
+        <div class="title">Staff Login.</div>
+        <p class="subtitle">
+          <span>Experience our personalised styling journey with</span>
+          <br />
+          <span>Lane Crawford.</span>
+        </p>
      </div>

      <div class="login-container">
@@ -32,7 +35,11 @@
            <img :src="google" class="google-icon" />
            Sign in with Google
          </div> -->
-          <GoogleLogin @googelLogin="handleGoogleLogin" ref="googleLoginRef" @click="clickGooleLogin"></GoogleLogin>
+          <GoogleLogin
+            @googelLogin="handleGoogleLogin"
+            ref="googleLoginRef"
+            @click="clickGooleLogin"
+          ></GoogleLogin>
          <div class="sign-up-button" @click="handleSignup">Don’t have an account? Sign Up</div>
        </div>
      </div>
@@ -183,7 +190,7 @@ const handleSignup = () => {
  cursor: pointer;
  z-index: 3;
  font-size: 3.4rem;
-  .c-svg{
+  .c-svg {
    width: initial;
    height: initial;
  }
@@ -191,12 +198,14 @@ const handleSignup = () => {

 .header {
  margin-top: 1.42rem;
-  padding-left: 15.5rem;
+  padding-left: 14.5rem;
+  padding-right: 14.3rem;
  color: white;
  font-family: 'satoshiRegular';
  .title {
    font-size: 11rem;
    font-weight: bold;
+    font-weight: 700;
    margin-bottom: 0.8rem;
    color: white;
    font-family: 'satoshiBold';
@@ -226,11 +235,7 @@ const handleSignup = () => {
    position: relative;
    width: calc(100% - 28.4rem);
    height: 107.8rem;
-    background: radial-gradient(
-      100% 100% at 0% 0%,
-      rgba(0, 0, 0, 0.4) 0%,
-      rgba(0, 0, 0, 0.2) 100%
-    );
+    background: radial-gradient(100% 100% at 0% 0%, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 100%);
    backdrop-filter: blur(35px);
    -webkit-backdrop-filter: blur(35px);
    -moz-backdrop-filter: blur(35px);
--- a/src/views/login/ResetPage.vue
+++ b/src/views/login/ResetPage.vue
@@ -9,9 +9,12 @@

      <!-- 标题区域 -->
      <div class="header">
-        <div class="title">Log in.</div>
-        <p class="subtitle">Redefine the styling experience with AI.</p>
-        <p class="subtitle">Use Styling Angel to speed up your fashion journey.</p>
+        <div class="title">Staff Login.</div>
+        <p class="subtitle">
+          <span>Experience our personalised styling journey with</span>
+          <br />
+          <span>Lane Crawford.</span>
+        </p>
      </div>

      <div class="login-container">
--- a/src/views/login/SignupPage.vue
+++ b/src/views/login/SignupPage.vue
@@ -6,9 +6,8 @@
      </div>

      <div class="header">
-        <div class="title">Sign up.</div>
-        <p class="subtitle">Redefine the styling experience with AI.</p>
-        <p class="subtitle">Use Styling Angel to speed up your fashion journey.</p>
+        <div class="title">Staff Sign up.</div>
+        <p class="subtitle">Start my personalised styling journey with Lane Crawford.</p>
      </div>

      <div class="login-container">
@@ -30,7 +29,12 @@

          <button type="button" class="login-button" @click="handleConfirm">Sign Up</button>

-          <GoogleLogin text="Sign up with Google" @googelLogin="handleGoogleSignup" ref="googleSignupRef" @click="clickGooleLogin" />
+          <GoogleLogin
+            text="Sign up with Google"
+            @googelLogin="handleGoogleSignup"
+            ref="googleSignupRef"
+            @click="clickGooleLogin"
+          />
        </div>
      </div>
    </div>
@@ -191,7 +195,8 @@ const handleGoogleSignup = async (accessToken: string) => {

 .header {
  margin-top: 1.42rem;
-  padding-left: 15.5rem;
+  padding-left: 14.5rem;
+  padding-right: 14.3rem;
  color: white;
  font-family: 'satoshiRegular';
  .title {
@@ -281,7 +286,6 @@ const handleGoogleSignup = async (accessToken: string) => {
  }
 }

-
 .footer {
  position: relative;
  text-align: center;
--- a/src/views/login/WelcomePage.vue
+++ b/src/views/login/WelcomePage.vue
@@ -2,10 +2,14 @@
  <div class="welcome-page safe-area-top safe-area-bottom">
    <div class="content">
      <div class="title">
-        AI STYLING <br />
-        ASSISTANT
+        Styling <br />
+        Assistant
      </div>
-      <p class="subtitle">Redefine the styling experience with AI.</p>
+      <p class="subtitle">
+        <span>Experience our personalised styling journey with</span>
+        <br>
+        <span> Lane Crawford.</span>
+      </p>
      <div class="btn-container flex">
        <div class="log btn" @click="goToLogin">Log in</div>
        <div class="sign btn" @click="goToSignup">Sign up</div>
@@ -49,15 +53,16 @@ const goToLogin = () => {
  font-weight: 400;
  margin-bottom: 31.5rem;
  .title {
-    font-family: 'boskaRegular';
-    line-height: 93%;
-    letter-spacing: -0.02em;
+    font-family: 'satoshiMedium';
+    line-height: 120%;
+    // letter-spacing: -0.02em;
  }
  .subtitle {
    font-size: 3.2rem;
    font-family: 'satoshiRegular';
    margin: 3.2rem 0 6rem;
-    list-style: 124%;
+    font-weight: 400;
+    line-height: 124%;
    letter-spacing: 0.08em;
  }
  .btn-container {
--- a/src/views/login/customer.vue
+++ b/src/views/login/customer.vue
@@ -25,8 +25,8 @@
        <div class="text">
          <div class="form-title">{{ formTitle }}</div>
          <div class="description">
-            <p>Redefine the styling experience with AI.</p>
-            <p>Use Styling Angel to speed up your fashion journey.</p>
+            <p>Unlock personalized styling insights.</p>
+            <p>Enter a client profile to begin curating their next look with Styling Angel.</p>
          </div>
        </div>

@@ -70,7 +70,6 @@ import { customerCheckin, createCustomer, type CreateCustomerParams } from '@/ap
 import Profile from '../Workshop/profile.vue'
 import MyEvent from '@/utils/myEvent'

-
 const profileRef = ref<typeof Profile>(null)
 const handleOpenProfile = () => {
  profileRef.value.open()
@@ -107,6 +106,7 @@ const handleConfirm = async () => {
    customerCheckin({ nickname: customerData.value.nickname }).then((res) => {
      useUserInfoStore().resetGenerateParams()
      generateStore.setCustomerInfo(res)
+      MyEvent.emit('clear-generate-state')
      router.push('/workshop/home')
    })
  } else {
--- a/src/views/stylist/index.vue
+++ b/src/views/stylist/index.vue
@@ -35,7 +35,7 @@

    <!-- Continue按钮 -->
    <div class="continue-button" @click="handleContinue" v-if="!$route.query?.demo">Continue</div>
-    <van-dialog
+    <!-- <van-dialog
      class="video-dialog"
      :show-confirm-button="false"
      :show-cancel-button="false"
@@ -47,7 +47,7 @@
        <van-icon name="cross" class="close-icon" />
      </div>
      <Video ref="videoRef" />
-    </van-dialog>
+    </van-dialog> -->
  </div>
 </template>

@@ -57,7 +57,9 @@ import { useRouter } from 'vue-router'
 import Video from './components/Video.vue'
 import { useUserInfoStore } from '@/stores'
 import male from '@/assets/images/male.png'
+import maleThumb from '@/assets/images/male_thumb.png'
 import female from '@/assets/images/female.png'
+import femaleThumb from '@/assets/images/female_thumb.png'
 import HeaderTitle from '@/components/HeaderTitle.vue'
 import FooterNavigation from '@/components/FooterNavigation.vue'

@@ -70,28 +72,32 @@ const stylists = ref<any[]>([
    value: 'crystal',
    name: 'Vera Lo',
    description: 'Contemporary, Classic, Simple Silhouettes, Statement Pieces',
-    image: female
+    image: female,
+    thumb: femaleThumb
  },
  {
    id: 2,
    value: 'mini',
    name: 'Sarah Chen',
    description: 'Modern, Edgy, Bold Colors, Street Style',
-    image: male
+    image: male,
+    thumb: maleThumb
  },
  {
    id: 3,
    value: 'crystal',
    name: 'Emma Wilson',
    description: 'Elegant, Feminine, Vintage Inspired, Soft Tones',
-    image: female
+    image: female,
+    thumb: femaleThumb
  },
  {
    id: 4,
    value: 'mini',
    name: 'Alex Johnson',
    description: 'Minimalist, Professional, Neutral Palette, Clean Lines',
-    image: male
+    image: male,
+    thumb: maleThumb
  }
 ])
 const currentChoosed = ref(1)
@@ -119,20 +125,22 @@ const handleClickStylist = (item: any) => {

 const handleContinue = () => {
  const generateParams = userInfoStore.getGenerateParams()
-  generateParams.stylist =
-    stylists.value.find((item) => item.id === currentChoosed.value)?.value || ''
+  const selected = stylists.value.find((item) => item.id === currentChoosed.value)
+  generateParams.stylist = selected?.value
+  generateParams.stylistImage = selected?.thumb
+
  userInfoStore.setGenerateParams(generateParams)

  router.push('/workshop/stylist/sex')
 }

 // 监听showVideo变化，关闭时暂停视频
-watch(showVideo, (newValue) => {
-  if (!newValue && videoRef.value) {
-    videoRef.value.pause()
-    videoRef.value.reset()
-  }
-})
+// watch(showVideo, (newValue) => {
+//   if (!newValue && videoRef.value) {
+//     videoRef.value.pause()
+//     videoRef.value.reset()
+//   }
+// })
 </script>

 <style scoped lang="less">