From d3220a040990892a4856a378b80537b5f1fbbc4e Mon Sep 17 00:00:00 2001
From: ADKCodeXD <790532173@qq.com>
Date: Fri, 8 Mar 2024 17:43:38 +0800
Subject: [PATCH] feat: update view and reaction

---
 components/CommentItem.vue              |   2 +-
 components/MMGC/Header.vue              |  37 +-
 components/MemberPop.vue                |   2 +-
 components/MovieListCard.vue            |   2 +-
 components/MovieShowItem.vue            |   5 +-
 components/MyCustom/AvatarUpload.vue    |   2 +-
 components/MyInfo.vue                   |  98 +++--
 components/MyInfoEdit.vue               |   2 +-
 components/ReviewItem.vue               |  83 ++++
 composables/apis/activity.ts            |   2 +-
 composables/apis/comment.ts             |   2 +-
 composables/apis/movie.ts               |   2 +-
 composables/useActivity.ts              |   2 +-
 composables/useFormRules.ts             |   2 +-
 composables/useLoginpage.ts             | 103 +++++
 composables/useMembers.ts               |   6 +-
 composables/useMovieOper.ts             |   2 +-
 composables/useXFecth.ts                |   2 +-
 i18n/i18n.ts                            |   9 +-
 i18n/locales/cn.json                    |   4 +-
 i18n/locales/en.json                    |   4 +-
 i18n/locales/jp.json                    |   4 +-
 pages/activity/[activityId]/about.vue   |   2 +-
 pages/activity/[activityId]/history.vue | 207 +++++----
 pages/activity/[activityId]/main.vue    |  37 +-
 pages/activity/[activityId]/support.vue | 234 ++++------
 pages/login.vue                         | 104 +----
 pages/mobile/login.vue                  | 188 ++++++++
 pages/movie/[movieId].vue               | 553 ++++++++++++------------
 stores/global.ts                        |   2 +-
 stores/user.ts                          |   2 +-
 types/comment.type.ts                   |   2 +-
 types/global.ts                         |   2 +-
 types/movie.type.ts                     | 257 +++++------
 34 files changed, 1151 insertions(+), 816 deletions(-)
 create mode 100644 components/ReviewItem.vue
 create mode 100644 composables/useLoginpage.ts
 create mode 100644 pages/mobile/login.vue

diff --git a/components/CommentItem.vue b/components/CommentItem.vue
index 1c3aa0e..b9fd7a8 100644
--- a/components/CommentItem.vue
+++ b/components/CommentItem.vue
@@ -107,7 +107,7 @@
 </template>
 <script lang="ts" setup>
 import { CommentParams, CommentVo } from 'Comment'
-import { MovieVo } from 'Movie'
+import type { MovieVo } from 'Movie'
 import { useUserStore } from '~~/stores/user'
 import { deleteComment, addComment } from '~~/composables/apis/comment'
 import { children } from 'dom7'
diff --git a/components/MMGC/Header.vue b/components/MMGC/Header.vue
index c20d42e..d47c5d8 100644
--- a/components/MMGC/Header.vue
+++ b/components/MMGC/Header.vue
@@ -6,22 +6,23 @@
       </section>
       <nav class="MMGC-nav">
         <p class="nav-item">
+          <div class="active" :class="{active2:currentRoute(`/activity/${activityId}/about`)}"></div>
           <NuxtLink :to="localePath(`/activity/${activityId}/about`)"> {{ $t('desc') }} </NuxtLink>
         </p>
-        <i class="split">/</i>
         <p class="nav-item">
+          <div class="active" :class="{active2:currentRoute(`/activity/${activityId}/main`)}"></div>
           <NuxtLink :to="localePath(`/activity/${activityId}/main`)">
             {{ $t('mainStage') }}
           </NuxtLink>
         </p>
-        <i class="split">/</i>
         <p class="nav-item">
+          <div class="active" :class="{active2:currentRoute(`/activity/${activityId}/support`)}"></div>
           <NuxtLink :to="localePath(`/activity/${activityId}/support`)">
             {{ $t('organSponsor') }}
           </NuxtLink>
         </p>
-        <i class="split">/</i>
         <p class="nav-item">
+          <div class="active" :class="{active2:currentRoute(`/activity/${activityId}/history`)}"></div>
           <NuxtLink :to="localePath(`/activity/${activityId}/history`)">
             {{ $t('history') }}
           </NuxtLink>
@@ -110,12 +111,13 @@
   </div>
 </template>
 <script setup lang="ts">
-import { MemberVo } from 'Member'
 import { storeToRefs } from 'pinia'
 import { useGlobalStore } from '~~/stores/global'
 import { useUserStore } from '~~/stores/user'
 import lodash from 'lodash'
-import { Ref } from 'vue'
+import type { Ref } from 'vue'
+import type { MemberVo } from 'Member'
+
 const route = useRoute()
 const store = useGlobalStore()
 const localePath = useLocalePath()
@@ -128,6 +130,7 @@ const userInfo = storeToRefs(userStore).userInfo as unknown as Ref<MemberVo>
 
 const activityId =
   parseInt(route.params.activityId?.toString()) || globalStore.config?.currentActivityId
+
 let activityData = ref<any>()
 
 if (activityId === globalStore.config?.currentActivityId) {
@@ -147,6 +150,11 @@ const isUserInfo = computed(() => {
   return !lodash.isEmpty(userInfo.value)
 })
 
+const currentRoute = (link:any)=> {
+  const route2 = localeRoute('link')
+  return route2?.fullPath === route.fullPath
+}
+
 const goWelcome = () => {
   const route = localeRoute('/welcome')
   navigateTo(route?.fullPath)
@@ -198,6 +206,16 @@ const logout = () => {
       transition: color 0.4s ease;
       margin: 0 6px;
       width: 50px;
+      display: flex;
+      align-items: center;
+      .active {
+        width: 8px;
+        height: 16px;
+        transition: all ease 0.4s;
+        background-color: gray;
+        border-radius: 6px;
+        margin-right: 4px;
+      }
       a {
         display: flex;
         flex-direction: column;
@@ -211,6 +229,13 @@ const logout = () => {
       }
       &:hover {
         color: $themeColor;
+        .active {
+          background-color: $themeColor;
+          transform: scaleY(1.2);
+          &.active2 {
+            background-color: $themeColor;
+          }
+        }
       }
     }
     .split {
@@ -262,7 +287,7 @@ const logout = () => {
     font-size: $bigFontSize;
     font-weight: 600;
     .nav-item {
-      margin: 0 4px;
+      margin: 0 16px;
       width: unset;
       a {
         flex-direction: row;
diff --git a/components/MemberPop.vue b/components/MemberPop.vue
index 208e00f..12851f0 100644
--- a/components/MemberPop.vue
+++ b/components/MemberPop.vue
@@ -40,7 +40,7 @@
   </el-popover>
 </template>
 <script setup lang="ts">
-import { MemberVo } from 'Member'
+import type { MemberVo } from 'Member'
 import { calcZip } from '~~/utils'
 
 const props = defineProps<{
diff --git a/components/MovieListCard.vue b/components/MovieListCard.vue
index f2e8b30..4cd7c1e 100644
--- a/components/MovieListCard.vue
+++ b/components/MovieListCard.vue
@@ -78,7 +78,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { MovieVo } from 'Movie'
+import type { MovieVo } from 'Movie'
 
 defineProps<{
   movieItem: MovieVo
diff --git a/components/MovieShowItem.vue b/components/MovieShowItem.vue
index 92e8d2a..cb8ba1c 100644
--- a/components/MovieShowItem.vue
+++ b/components/MovieShowItem.vue
@@ -5,9 +5,6 @@
         v-if="movieItem.moviePlaylink"
         :video-url="movieItem.moviePlaylink"
         :cover="movieItem.movieCover"
-        :ref="setItemRefs"
-        @on-play="canAutoPlay = false"
-        @on-pause="canAutoPlay = true"
       />
       <div v-else class="w-full h-full">
         <MyCustomImage :img="movieItem.movieCover"></MyCustomImage>
@@ -72,7 +69,7 @@
 </template>
 
 <script setup lang="ts">
-import { MovieVo } from 'Movie'
+import type { MovieVo } from 'Movie'
 defineProps<{
   movieItem: MovieVo
 }>()
diff --git a/components/MyCustom/AvatarUpload.vue b/components/MyCustom/AvatarUpload.vue
index c52bdf3..639eec7 100644
--- a/components/MyCustom/AvatarUpload.vue
+++ b/components/MyCustom/AvatarUpload.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ElMessage, UploadRequestOptions } from 'element-plus'
+import { ElMessage, type UploadRequestOptions } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
 
 import type { UploadProps } from 'element-plus'
diff --git a/components/MyInfo.vue b/components/MyInfo.vue
index 0155450..138bc00 100644
--- a/components/MyInfo.vue
+++ b/components/MyInfo.vue
@@ -1,46 +1,61 @@
 <template>
-  <div @mouseover="isShow = true" class="relative" v-if="memberVo">
+  <div class="relative" v-if="memberVo" ref="ref1">
     <ElAvatar :src="memberVo.avatar || undefined" class="mx-1">{{ noAvatar }}</ElAvatar>
-    <div class="popover" @mouseleave="showOff" v-show="isShow" @mouseover="isShow = true">
-      <div class="flex flex-col items-center">
-        <ElAvatar :size="60" :src="memberVo.avatar || undefined" class="mx-1">{{
-          noAvatar
-        }}</ElAvatar>
-        <p class="title mt-1" style="font-size: 24px">{{ memberVo.memberName }}</p>
-        <p>{{ memberVo.username }}</p>
-        <p v-if="snsSites.length">{{ $t('sns') }}</p>
-        <div class="flex flex-wrap">
-          <div
-            v-for="item in snsSites"
-            :key="item.value"
-            class="cursor-pointer"
-            :title="`${$t('clickJump')} ${item.value}`"
-            @click="openlink(item.value)"
-          >
-            <Icon :name="item.icon" :style="{ color: item.color }" size="16px" class="mr-1" />
+    <Transition name="up-to-down">
+      <div class="popover" ref="ref2" v-show="isHover || isHover1">
+        <div class="flex flex-col">
+          <div class="flex items-center justify-between">
+            <ElAvatar :size="52" :src="memberVo.avatar || undefined">{{ noAvatar }}</ElAvatar>
+            <div class="flex flex-col ml-2">
+              <p class="name1">{{ memberVo.memberName }}</p>
+              <p class="username">@{{ memberVo.username }}</p>
+            </div>
+          </div>
+          <div class="flex flex-col mt-4">
+            <p class="text-light-50 text-lg">{{ $t('sns') }}</p>
+            <div class="flex flex-wrap" v-if="snsSites.length">
+              <div
+                v-for="item in snsSites"
+                :key="item.value"
+                class="cursor-pointer mx-1"
+                :title="`${$t('clickJump')} ${item.value}`"
+                @click="openlink(item.value)"
+              >
+                <Icon :name="item.icon" :style="{ color: item.color }" size="16px" class="mr-1" />
+              </div>
+            </div>
+            <p v-else>暂未关联社交媒体</p>
           </div>
         </div>
-      </div>
-      <div class="wrapper">
-        <div class="btn" @click="editMyInfo"><Icon name="ion:edit"></Icon>{{ $t('update') }}</div>
-        <div class="btn" @click="logout">
-          <Icon name="ion:log-out-outline"></Icon>{{ $t('logout') }}
+
+        <div class="wrapper">
+          <div class="btn bg-blue-500" @click="editMyInfo">
+            <Icon name="ion:edit"></Icon>{{ $t('update') }}
+          </div>
+          <div class="btn bg-red-500" @click="logout">
+            <Icon name="ion:log-out-outline"></Icon>{{ $t('logout') }}
+          </div>
         </div>
+        <MyInfoEdit ref="editRef" />
       </div>
-      <MyInfoEdit ref="editRef" />
-    </div>
+    </Transition>
   </div>
 </template>
 <script setup lang="ts">
 import _ from 'lodash'
-import { MemberVo } from 'Member'
+import type { MemberVo } from 'Member'
+
 const props = defineProps<{
   memberVo: MemberVo
 }>()
-const { openlink, noAvatar, snsSites } = useMemberPop(props.memberVo)
 const emit = defineEmits(['logout'])
+const { openlink, noAvatar, snsSites } = useMemberPop(props.memberVo)
 const isShow = ref(false)
+const ref2 = ref()
+const ref1 = ref()
 
+const isHover = useElementHover(ref2)
+const isHover1 = useElementHover(ref1)
 const editRef = ref()
 
 const logout = () => {
@@ -60,15 +75,16 @@ const showOff = _.debounce(() => {
 <style lang="scss" scoped>
 .popover {
   position: absolute;
-  padding: 3px;
+  padding: 8px 8px;
   top: 120%;
-  right: -50%;
+  right: -45%;
   width: 12rem;
-  height: 15rem;
-  border-radius: 30px;
+  height: 13rem;
+  border-radius: 16px;
   color: $themeNotActiveColor;
   box-shadow: 0 0 10px rgba(223, 62, 13, 0.212);
   display: flex;
+  border: 2px solid $themeColor;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
@@ -76,9 +92,18 @@ const showOff = _.debounce(() => {
   backdrop-filter: blur(5px);
   z-index: 1;
   overflow: hidden;
+  .name1 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: white;
+    @include showLine(2);
+  }
+  .username {
+    font-size: 0.8rem;
+    color: rgb(192, 192, 192);
+  }
   .wrapper {
-    width: 105%;
-    transform: translateY(4px);
+    width: 100%;
     flex-shrink: 0;
     .btn {
       width: 100%;
@@ -88,13 +113,12 @@ const showOff = _.debounce(() => {
       padding: 0 20px;
       height: 28px;
       font-size: 14px;
-      border-bottom: 1px solid;
-      background-color: rgba(39, 24, 1, 0.342);
+      border-radius: 16px;
+      margin: 4px 0;
       transition: 0.4s ease all;
-      color: $themeNotActiveColor;
+      color: white;
       &:hover {
         color: $themeColor;
-        background-color: rgba(39, 24, 1, 0.87);
       }
     }
   }
diff --git a/components/MyInfoEdit.vue b/components/MyInfoEdit.vue
index de4bd00..40beec6 100644
--- a/components/MyInfoEdit.vue
+++ b/components/MyInfoEdit.vue
@@ -44,7 +44,7 @@
   </el-dialog>
 </template>
 <script setup lang="ts">
-import { MemberVo } from 'Member'
+import type { MemberVo } from 'Member'
 import { UserApi } from '~~/composables/apis/user'
 import { useUserStore } from '~~/stores/user'
 import { genral } from '~~/composables/useFormRules'
diff --git a/components/ReviewItem.vue b/components/ReviewItem.vue
new file mode 100644
index 0000000..708ec92
--- /dev/null
+++ b/components/ReviewItem.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="review-item mb-2">
+    <div class="review-content mr-1 flex-1">
+      <p>{{ comment?.content }}</p>
+      <div class="triangle"></div>
+      <div class="info">
+        <p class="publish-time">发布于:{{ comment.createTime }}</p>
+        <el-popconfirm
+          :title="$t('confirmDelete')"
+          @confirm="deleteMyComment"
+          v-if="userInfo && userInfo.memberId === comment.memberVo?.memberId"
+        >
+          <template #reference>
+            <ElButton type="danger" link size="small">{{ $t('delete') }}</ElButton>
+          </template>
+        </el-popconfirm>
+      </div>
+    </div>
+    <div class="flex-shrink-0 translate-y-4">
+      <MemberPop :member-vo="comment.memberVo" v-if="comment.memberVo" :size="28" />
+      <MemberPop v-else :member-vo="{}" :size="28" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { CommentVo } from 'Comment'
+import type { MovieVo } from 'Movie'
+import { useUserStore } from '~~/stores/user'
+import { deleteComment } from '~~/composables/apis/comment'
+
+const { userInfo } = useUserStore()
+const props = defineProps<{
+  comment: CommentVo
+  movieDetail: MovieVo
+  isChildren?: boolean
+  level: number
+  topPrarentId: number
+}>()
+const emits = defineEmits(['refresh', 'sentReply'])
+
+const { t } = useI18n()
+
+const deleteMyComment = async () => {
+  await deleteComment(props.comment.commentId)
+  ElMessage.success(t('deleteSuccess'))
+  emits('refresh')
+}
+</script>
+
+<style lang="scss" scoped>
+.review-item {
+  display: flex;
+  align-items: flex-end;
+  .review-content {
+    border-radius: 12px;
+    background-color: white;
+    padding: 8px;
+    position: relative;
+    color: black;
+    .info {
+      font-size: 10px;
+      margin-top: 1rem;
+      display: flex;
+      align-items: flex-end;
+      justify-content: space-between;
+      .publish-time {
+        color: #726d6d;
+      }
+    }
+    .triangle {
+      position: absolute;
+      bottom: -2px;
+      right: 3px;
+      color: white;
+      width: 10px;
+      height: 10px;
+      background-color: white;
+      clip-path: polygon(17% 0, 45% 0, 62% 0, 83% 55%, 100% 100%, 46% 78%, 10% 71%, 0 38%, 0 0);
+    }
+  }
+}
+</style>
diff --git a/composables/apis/activity.ts b/composables/apis/activity.ts
index 33ca3fe..870e793 100644
--- a/composables/apis/activity.ts
+++ b/composables/apis/activity.ts
@@ -1,4 +1,4 @@
-import { ActivityVo, DayVo } from 'Activity'
+import type { ActivityVo, DayVo } from 'Activity'
 
 export const getActivityDetail = async (activityId: number) => {
   const { data, refresh } = await xFetch<ActivityVo>(
diff --git a/composables/apis/comment.ts b/composables/apis/comment.ts
index d1a6cec..211c9ca 100644
--- a/composables/apis/comment.ts
+++ b/composables/apis/comment.ts
@@ -1,4 +1,4 @@
-import { CommentParams, CommentVo } from 'Comment'
+import type { CommentParams, CommentVo } from 'Comment'
 
 export const getCommentList = async (pageParams: PageParams & { movieId: number }) => {
   const { data, refresh } = await xFetch<PageResult<CommentVo>>(
diff --git a/composables/apis/movie.ts b/composables/apis/movie.ts
index a6349dd..2e761f3 100644
--- a/composables/apis/movie.ts
+++ b/composables/apis/movie.ts
@@ -1,4 +1,4 @@
-import { MovieVo } from 'Movie'
+import type { MovieVo } from 'Movie'
 
 export const getMovieByActivityId = async (activityId: number, day: number) => {
   const { data, refresh } = await xFetch<PageResult<MovieVo>>(
diff --git a/composables/useActivity.ts b/composables/useActivity.ts
index a68c7c8..0658d18 100644
--- a/composables/useActivity.ts
+++ b/composables/useActivity.ts
@@ -1,4 +1,4 @@
-import { ActivityVo } from 'Activity'
+import type { ActivityVo } from 'Activity'
 import _ from 'lodash'
 import { getActivityDetail, getActivityList } from './apis/activity'
 export const useActivityList = () => {
diff --git a/composables/useFormRules.ts b/composables/useFormRules.ts
index 8d5185f..08d3461 100644
--- a/composables/useFormRules.ts
+++ b/composables/useFormRules.ts
@@ -1,4 +1,4 @@
-import { MemberParams } from 'Member'
+import type { MemberParams } from 'Member'
 
 export const genral = (name: string, t: any) => {
   return [
diff --git a/composables/useLoginpage.ts b/composables/useLoginpage.ts
new file mode 100644
index 0000000..747ed12
--- /dev/null
+++ b/composables/useLoginpage.ts
@@ -0,0 +1,103 @@
+import type { MemberParams } from 'Member'
+import { useUserStore } from '~~/stores/user'
+import { UserApi } from '~~/composables/apis/user'
+import { getCode } from '~~/composables/apis/email'
+import _ from 'lodash'
+
+export const useLoginPage = () => {
+  const isRegister = ref(false)
+  const isSend = ref(false)
+  const time = ref(60)
+  const registerRef = ref()
+  const loginRef = ref()
+  const isLoading = ref(false)
+
+  const loginForm = reactive<{ username: string; password: string }>({
+    username: '',
+    password: ''
+  })
+
+  const registerForm = reactive<MemberParams & { rePassword: string }>({
+    username: '',
+    password: '',
+    verifyCode: undefined,
+    memberName: '',
+    rePassword: '',
+    email: ''
+  })
+
+  const localeRoute = useLocaleRoute()
+  const { t } = useI18n()
+  const { createMessage } = useMessage()
+  const { rulesRegister, ruleslogin } = useLoginRules(registerForm, t)
+
+  const goWelcome = () => {
+    const route = localeRoute('/welcome')
+    navigateTo(route?.fullPath)
+  }
+
+  const getCodeFn = async () => {
+    try {
+      await registerRef.value.validateField('email')
+      isLoading.value = true
+      await getCode(registerForm.email)
+      isSend.value = true
+      const myInternal = setInterval(() => {
+        time.value--
+      }, 1000)
+      setTimeout(() => {
+        isSend.value = false
+        clearInterval(myInternal)
+        time.value = 60
+      }, 60000)
+      createMessage(t('getCodeSuccess'))
+    } catch (error) {
+      //
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  const submitFn = async () => {
+    if (isRegister.value) {
+      await registerRef.value.validate()
+      registerForm.verifyCode = parseInt(registerForm.verifyCode!.toString())
+      const form = _.cloneDeep(registerForm)
+      const { data: token } = await UserApi.register(form)
+      if (token) {
+        const userStore = useUserStore()
+        await userStore.setToken(token)
+        await userStore.getUserInfo()
+        const router = useRouter()
+        router.push('/')
+      }
+    } else {
+      await loginRef.value.validate()
+      const form = _.cloneDeep(loginForm)
+      const { data: token } = await UserApi.login(form)
+      if (token) {
+        const userStore = useUserStore()
+        userStore.setToken(token)
+        await userStore.getUserInfo()
+        const router = useRouter()
+        router.push('/')
+      }
+    }
+  }
+
+  return {
+    getCodeFn,
+    submitFn,
+    goWelcome,
+    ruleslogin,
+    rulesRegister,
+    loginForm,
+    registerForm,
+    isLoading,
+    loginRef,
+    registerRef,
+    time,
+    isSend,
+    isRegister
+  }
+}
diff --git a/composables/useMembers.ts b/composables/useMembers.ts
index ce9be45..ddcf8aa 100644
--- a/composables/useMembers.ts
+++ b/composables/useMembers.ts
@@ -1,13 +1,17 @@
-import { MemberVo } from 'Member'
+import type { MemberVo } from 'Member'
 import { useOpenLink } from './useLink'
 
 export const useMemberPop = (memberVO: MemberVo) => {
   const noAvatar = computed(() => {
+    if (!memberVO.avatar && !memberVO.memberName) {
+      return 'Null'
+    }
     if (!memberVO.avatar) {
       return memberVO.memberName.slice(0, 1)
     }
     return undefined
   })
+
   const snsSites = computed(() => {
     return useSnsSites(memberVO.snsSite)
   })
diff --git a/composables/useMovieOper.ts b/composables/useMovieOper.ts
index 2052366..55d880c 100644
--- a/composables/useMovieOper.ts
+++ b/composables/useMovieOper.ts
@@ -1,4 +1,4 @@
-import { MovieVo } from 'Movie'
+import type { MovieVo } from 'Movie'
 import { cancelVideoLike, likeVideo, pollVideo } from './apis/oper'
 
 export const useMovieOperate = () => {
diff --git a/composables/useXFecth.ts b/composables/useXFecth.ts
index 88666ed..eb3bb1e 100644
--- a/composables/useXFecth.ts
+++ b/composables/useXFecth.ts
@@ -26,7 +26,7 @@ export const xFetch = async <T>(
     },
     onResponse({ response }) {
       const data = response._data
-      if (data.code !== 200) {
+      if (data && data.code !== 200) {
         if (process.client) {
           if (data.msg) {
             ElMessage({
diff --git a/i18n/i18n.ts b/i18n/i18n.ts
index cffdeae..65cf8a6 100644
--- a/i18n/i18n.ts
+++ b/i18n/i18n.ts
@@ -1,12 +1,13 @@
 import cn from './locales/cn.json'
 import en from './locales/en.json'
 import jp from './locales/jp.json'
-
 export const message = { cn, en, jp }
-export const i18n = {
+
+export default defineI18nConfig(() => ({
   legacy: false,
   globalInjection: true,
   locale: 'cn',
   warnHtmlMessage: false,
-  messages: message
-}
+  messages: message,
+  fallbackLocale: 'cn'
+}))
diff --git a/i18n/locales/cn.json b/i18n/locales/cn.json
index 48ac529..2c6beec 100644
--- a/i18n/locales/cn.json
+++ b/i18n/locales/cn.json
@@ -112,5 +112,7 @@
   "clickup": "点击上页",
   "pollTip": "你确定要给该作品投票吗?（当日内的作品一个用户只能投两票）",
   "tip": "提示",
-  "more": "更多"
+  "more": "更多",
+  "delete": "删除",
+  "gotoView": "前往查看"
 }
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 79ad04f..95636a8 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -111,5 +111,7 @@
   "clickup": "Click Up",
   "pollTip": "Are you sure you want to vote for this work? (One user can only vote for two works within the day)",
   "tip": "Tip",
-  "more": "See More"
+  "more": "See More",
+  "delete": "Delete",
+  "gotoView": "Go to View"
 }
diff --git a/i18n/locales/jp.json b/i18n/locales/jp.json
index 7c29856..626e7a9 100644
--- a/i18n/locales/jp.json
+++ b/i18n/locales/jp.json
@@ -109,5 +109,7 @@
   "clickDown": "Click Down",
   "clickup": "Click Up",
   "pollTip": "この作品に票を入れますか? (1ユーザーが1日に入れる作品は2作品までです)",
-  "tip": "注意"
+  "tip": "注意",
+  "delete": "削除",
+  "gotoView": "見に行く"
 }
diff --git a/pages/activity/[activityId]/about.vue b/pages/activity/[activityId]/about.vue
index 27ec85d..441a057 100644
--- a/pages/activity/[activityId]/about.vue
+++ b/pages/activity/[activityId]/about.vue
@@ -132,7 +132,7 @@
 </template>
 
 <script setup lang="ts">
-import { ActivityVo } from 'Activity'
+import type { ActivityVo } from 'Activity'
 import _ from 'lodash'
 import { useGlobalStore } from '~~/stores/global'
 
diff --git a/pages/activity/[activityId]/history.vue b/pages/activity/[activityId]/history.vue
index 45e28e5..4ade2b8 100644
--- a/pages/activity/[activityId]/history.vue
+++ b/pages/activity/[activityId]/history.vue
@@ -1,6 +1,49 @@
 <template>
-  <div class="wrapper">
+  <div class="flex flex-col items-center w-full">
+    <div class="line"></div>
+    <p class="absolute text-light-50 right-1/2 text-3xl top-36 mr-4">To Be Continue.....</p>
     <div
+      class="activity-content h-40 relative flex items-center w-4/5 my-8"
+      v-for="activity in activityList?.result"
+      :key="activity.activityId"
+    >
+      <div class="ball w-4 h-4 rounded-full bg-yellow-400"></div>
+      <div class="left-time">
+        <p>
+          {{ $dayjs(activity.startTime).format('YYYY-MM-DD') }} -
+          {{ $dayjs(activity.endTime).format('YYYY-MM-DD') }}
+        </p>
+        <div class="ongoing">
+          <p v-if="isOngoing(activity.startTime, activity.endTime)" class="flex items-center">
+            <ElImage :src="loading" class="mr-2 h-4"></ElImage>
+            进行中!
+          </p>
+          <p v-else class="flex items-center"><span class="dot"></span>已谢幕!</p>
+        </div>
+      </div>
+      <div class="right-logo">
+        <div class="img">
+          <MyCustomImage :img="activity.activityLogo" />
+        </div>
+        <div class="flex flex-col ml-4 items-start">
+          <p class="activity-title mb-2">
+            {{ activity.activityName[locale] || activity.activityName['cn'] }}
+          </p>
+          <p
+            class="desc text-light-50 text-xs"
+            v-html="activity.desc && strictLength(activity.desc[locale] || activity.desc['cn'])"
+          ></p>
+          <ElButton
+            link
+            type="primary"
+            class="mt-2"
+            @click="gotoActivity(`/activity/${activity.activityId}`)"
+            >前往查看</ElButton
+          >
+        </div>
+      </div>
+    </div>
+    <!-- <div
       class="activity-content"
       v-for="activity in activityList?.result"
       :key="activity.activityId"
@@ -23,110 +66,102 @@
           {{ $t('startAndEndTime') }}:{{ activity.startTime }} - {{ activity.endTime }}
         </p>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
 <script setup lang="ts">
 import { useGlobalStore } from '~~/stores/global'
+import { useDayjs } from '#dayjs'
+import loading from '@/assets/img/1_1.gif'
 const { activityList, isLoading } = useActivityList()
 const { config, unloading } = useGlobalStore()
 const { locale } = useCurrentLocale()
 const gotoActivity = useLocaleNavigate()
+const dayjs = useDayjs()
+
+const isOngoing = (dateStr1: any, dateStr2: any) => {
+  if (!dateStr1 || !dateStr2) return false
+  const dateRange1 = dayjs(dateStr1).toDate().getTime()
+  const dateRange2 = dayjs(dateStr2).toDate().getTime()
+  const date = new Date().getTime()
+  return date < dateRange2 && date > dateRange1
+}
+
+const strictLength = (htmlStr: string) => {
+  return htmlStr && htmlStr.length > 600
+    ? `${htmlStr.slice(0, 600)}...`
+    : htmlStr.slice(0, 600) || '暂无介绍'
+}
+
 watchEffect(() => {
   if (!isLoading.value) unloading()
 })
 </script>
 
 <style lang="scss" scoped>
-@media screen and (min-width: 320px) {
-  .wrapper {
-    width: 97%;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    justify-self: flex-start;
-    align-self: self-start;
-  }
-  .activity-content {
-    width: 100%;
-    border: 1px solid $themeColor;
-    height: 200px;
-    overflow-y: hidden;
-    margin-bottom: 10px;
-    border-radius: 6px;
-    padding: 3px;
-    cursor: pointer;
-    display: flex;
-    .img {
-      width: 40%;
-      height: 100%;
-      flex-shrink: 0;
-    }
-    &:hover {
-      background-color: #2e1b01c7;
-    }
-    .info {
-      color: $themeColor;
-      .title {
-        @include showLine(2);
-        margin: 3px 0;
-      }
-      [class^='tag'] {
-        margin: 0;
-        margin-bottom: 5px;
-      }
-      .info-header {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-      }
-    }
+.line {
+  position: absolute;
+  width: 5px;
+  border-radius: 6px;
+  background-color: $themeColor;
+  height: 90%;
+  top: 150px;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  right: 0;
+}
+
+.ball {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  transition: all ease 0.2s;
+  cursor: pointer;
+  &:hover {
+    outline: rgb(255, 55, 0) 2px solid;
+    transform: translateX(-50%) scale(1.1);
   }
 }
 
-@media screen and (min-width: 1440px) {
-  .wrapper {
-    width: 80%;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    justify-self: flex-start;
-    align-self: self-start;
+.left-time {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-110%);
+  color: white;
+  font-size: 1.5rem;
+  font-weight: 600;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+.right-logo {
+  position: absolute;
+  right: 50%;
+  transform: translateX(105%);
+  display: flex;
+  align-items: center;
+  width: 50%;
+  .activity-title {
+    font-size: 2rem;
+    color: $themeColor;
+    font-weight: bold;
+  }
+  .img {
+    width: 150px;
+    margin-right: 2rem;
   }
-  .activity-content {
-    width: 100%;
-    border: 1px solid $themeColor;
-    height: 140px;
-    margin-bottom: 10px;
-    border-radius: 6px;
-    padding: 3px;
-    cursor: pointer;
-    display: flex;
-    .img {
-      width: 20%;
-      height: 100%;
-      flex-shrink: 0;
-    }
-    &:hover {
-      background-color: #2e1b01c7;
-    }
-    .info {
-      color: $themeColor;
-      .title {
-        @include showLine(1);
-        margin: 10px 0;
-      }
-      [class^='tag'] {
-        margin-bottom: 0;
-        margin: 0 4px;
-      }
-      .info-header {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-      }
-    }
+}
+.ongoing {
+  font-size: 1rem;
+  .dot {
+    display: block;
+    width: 12px;
+    height: 12px;
+    background-color: rgb(47, 248, 7);
+    border-radius: 50%;
+    margin-right: 4px;
   }
 }
 </style>
diff --git a/pages/activity/[activityId]/main.vue b/pages/activity/[activityId]/main.vue
index fd84486..c7673aa 100644
--- a/pages/activity/[activityId]/main.vue
+++ b/pages/activity/[activityId]/main.vue
@@ -58,7 +58,9 @@
         ></Icon>
         <ElDropdown @command="handleSwitchDay" placement="top">
           <Transition :name="currentAnime" mode="out-in">
-            <p class="text-light-50 text-4xl mx-2" :key="currentDay">Day {{ currentDay }}</p>
+            <p class="text-light-50 text-4xl mx-2 fadeout" :key="currentDay">
+              Day {{ currentDay }}
+            </p>
           </Transition>
           <template #dropdown>
             <ElDropdownMenu>
@@ -88,21 +90,24 @@
         </Transition>
       </div>
     </div>
-
-    <div
-      ref="background"
-      class="background"
-      v-if="currentDayItem"
-      :style="{
-        backgroundImage: `linear-gradient(to left,#000,transparent),url(${coverzip})`
-      }"
-    />
+    <Transition mode="out-in">
+      <div
+        ref="background"
+        class="background"
+        v-if="currentDayItem"
+        :key="coverzip"
+        :style="{
+          transition: 'all ease 0.4s',
+          backgroundImage: `linear-gradient(to left,#000,transparent),url(${coverzip})`
+        }"
+      />
+    </Transition>
   </div>
 </template>
 
 <script setup lang="ts">
-import { DayVo } from 'Activity'
-import { MovieVo } from 'Movie'
+import type { DayVo } from 'Activity'
+import type { MovieVo } from 'Movie'
 import { getActivityDays } from '~~/composables/apis/activity'
 import { getMovieByActivityId } from '~~/composables/apis/movie'
 import { useGlobalStore } from '~~/stores/global'
@@ -345,4 +350,12 @@ watch(
     opacity: 0;
   }
 }
+
+.fadeout {
+  transition: 0.3s all ease-in-out;
+  &:hover {
+    color: $themeColor;
+    transform: translateY(-2px);
+  }
+}
 </style>
diff --git a/pages/activity/[activityId]/support.vue b/pages/activity/[activityId]/support.vue
index b839023..601d07a 100644
--- a/pages/activity/[activityId]/support.vue
+++ b/pages/activity/[activityId]/support.vue
@@ -1,204 +1,142 @@
 <template>
-  <div class="w-full h-full flex items-center justify-center">
-    <div class="fullpage" ref="fullpageEl" v-if="activityData">
-      <div class="fullpage-container" ref="container" @mousewheel="onMouseWheel">
-        <!-- CM -->
-        <div class="section desc relative">
+  <div class="w-full h-full flex justify-center items-center">
+    <div class="nav" v-if="activityData">
+      <div class="flex items-center my-4" @click="currentActive = 0">
+        <div class="dot" :class="{ active: currentActive === 0 }"></div>
+        <p class="title-dot" :class="{ active: currentActive === 0 }">{{ $t('aboutM') }}</p>
+      </div>
+      <div
+        class="flex items-center my-4"
+        v-for="(item, index) in activityData.sponsorListVo"
+        :key="index"
+        @click="
+          () => {
+            currentActive = item.sposorId
+            currentActiveSponsor = item
+          }
+        "
+      >
+        <div class="dot" :class="{ active: currentActive === item.sposorId }"></div>
+        <p class="title-dot" :class="{ active: currentActive === item.sposorId }">
+          {{ item.sponsorName[locale] || item.sponsorName['cn'] }}
+        </p>
+      </div>
+    </div>
+    <Transition mode="out-in">
+      <template v-if="currentActive === 0">
+        <div class="desc">
           <div class="M-desc">
             <div class="title">{{ $t('aboutM') }}</div>
-
             <p class="my-2">{{ $t('MDesc') }}</p>
             <p class="my-2">{{ $t('MDesc2') }}</p>
             <p class="my-2">{{ $t('MDesc3') }}</p>
           </div>
           <div class="contact-me flex flex-col text-light-50">
-            <div class="contact">
-              <div class="wrapper">
-                <p class="label">BiliBili</p>
-              </div>
+            <div class="flex my-2">
+              <p class="tag-primary w-32">BiliBili</p>
               <a href="https://space.bilibili.com/523239">https://space.bilibili.com/523239</a>
             </div>
-            <div class="contact">
-              <div class="wrapper">
-                <p class="label">Niconico</p>
-              </div>
+            <div class="flex my-2">
+              <p class="tag-primary w-32">Niconico</p>
               <a href="https://www.nicovideo.jp/user/96755145"
                 >https://www.nicovideo.jp/user/96755145</a
               >
             </div>
-            <div class="contact">
-              <div class="wrapper">
-                <p class="label">Youtube</p>
-              </div>
+            <div class="flex my-2">
+              <p class="tag-primary w-32 mr-4">Youtube</p>
               <a href="https://www.youtube.com/channel/UCdFdBrjDrHGlDg-O67PbQYw"
                 >https://www.youtube.com/channel/UCdFdBrjDrHGlDg-O67PbQYw</a
               >
             </div>
-            <div class="contact">
-              <div class="wrapper">
-                <p class="label">Twitter</p>
-              </div>
+            <div class="flex my-2">
+              <p class="tag-primary w-32">Twitter</p>
               <a href="https://twitter.com/Mirai_MAD_Team">https://twitter.com/Mirai_MAD_Team</a>
             </div>
           </div>
         </div>
-        <div
-          class="section sponsor"
-          v-for="(item, index) in activityData.sponsorListVo"
-          :key="index"
-        >
-          <div :style="{ maxHeight: item.sponsorName.cn ? '400px' : '500px' }">
-            <MyCustomImage :img="item.sponsorLogo" />
+      </template>
+      <div v-else-if="currentActiveSponsor" class="w-full h-full flex items-center justify-center">
+        <div class="w-3/5 text-center">
+          <div :style="{ maxHeight: currentActiveSponsor.sponsorName.cn ? '400px' : '500px' }">
+            <MyCustomImage :img="currentActiveSponsor.sponsorLogo" />
           </div>
           <div class="title">
-            {{ item.sponsorName[locale] || item.sponsorName['cn'] }}
+            {{ currentActiveSponsor.sponsorName[locale] || currentActiveSponsor.sponsorName['cn'] }}
           </div>
           <div
             class="sub-title-no-line"
-            v-html="item.sponsorDesc[locale] || item.sponsorDesc['cn']"
+            v-html="
+              currentActiveSponsor.sponsorDesc[locale] || currentActiveSponsor.sponsorDesc['cn']
+            "
           />
         </div>
       </div>
-    </div>
-    <MyCustomLoading v-else />
-    <AchorList :page-state="pageState" @move="move" :achor-list="achorList" />
+      <MyCustomLoading v-else />
+    </Transition>
   </div>
 </template>
 
 <script setup lang="ts">
 import _ from 'lodash'
 import { useGlobalStore } from '~~/stores/global'
-const achorList = ref<any>([])
+
+const currentActive = ref(0)
+const currentActiveSponsor = ref<any>(undefined)
 
 const attrs: { activityId: number } = useAttrs() as any
 const { locale } = useCurrentLocale()
 const { activityData, getActivity } = useActivityDetail(attrs.activityId)
-const { fullpageEl, container, pageState, move, onMouseWheel } = useFullPageWheel(1)
 const { unloading } = useGlobalStore()
 
-const length = (activityData: any) => {
-  let len = 1
-  const list: { name: string }[] = []
-  list.push({ name: 'oranganDesc' })
-  if (activityData.sponsorListVo && activityData.sponsorListVo.length > 0) {
-    activityData.sponsorListVo?.forEach((item: any) => {
-      len++
-      list.push({ name: item.sponsorName[locale] || item.sponsorName['cn'] })
-    })
-  }
-  achorList.value = list
-  return len
-}
-
 await getActivity(attrs.activityId)
 unloading()
-
-watchEffect(() => {
-  const len = length(activityData.value || {})
-  pageState.len = len
-})
 </script>
 
 <style lang="scss" scoped>
-@media screen and (min-width: 320px) {
-  .fullpage {
-    height: 100%;
-    width: 95%;
-    overflow: hidden;
-    &-container {
-      height: 100%;
-      width: 100%;
-      transition: all ease 0.5s;
-      .sponsor {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-        text-align: center;
-      }
+.nav {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  left: 30px;
+  top: 50%;
+  transform: translateY(-50%);
+  .dot {
+    width: 6px;
+    border-radius: 12px;
+    height: 12px;
+    background-color: rgb(199, 199, 199);
+    margin-right: 1rem;
+    transition: all ease 0.3s;
+    &.active {
+      height: 14px;
+      background-color: $themeColor;
     }
-    .section {
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      width: 100%;
-      height: 100%;
-      overflow: auto;
-      &.desc {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        .M-desc {
-          display: inline-flex;
-          flex-direction: column;
-          max-width: 900px;
-          word-wrap: break-word;
-          word-break: normal;
-          font-size: $midFontSize;
-          color: $textColor;
-          line-height: 24px;
-        }
-        .contact {
-          display: flex;
-          align-items: center;
-          margin: 4px 0;
-          a {
-            max-width: 75%;
-            word-break: break-all;
-          }
-          .wrapper {
-            width: 100px;
-            .label {
-              width: 80px;
-              padding: 0 5px;
-              background-color: $themeColor;
-              border-radius: 4px;
-              margin-right: 4px;
-              color: $backgroundColor;
-            }
-          }
-        }
+  }
+  .title-dot {
+    font-size: 1.3rem;
+    color: rgb(199, 199, 199);
+    transition: all ease 0.3s;
+    cursor: pointer;
+    &:hover {
+      color: $themeColor;
+      .dot {
+        background-color: $themeColor;
+        height: 16px;
       }
     }
-    .cm-section {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      overflow-x: hidden;
-      justify-content: flex-start;
-      .video-cm {
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        .inner-container {
-          display: flex;
-          flex-direction: column;
-          width: 80%;
-          height: 100%;
-          .set {
-            color: $themeNotActiveColor;
-            font-size: $bigFontSize;
-            margin-left: 5px;
-            &:hover {
-              color: $themeColor;
-            }
-          }
-        }
-      }
+    &.active {
+      color: $themeColor;
     }
   }
 }
 
-@media screen and (min-width: 1440px) {
-  .fullpage {
-    width: 80%;
-    .section {
-      overflow: hidden;
-      justify-content: center;
-    }
-  }
+.desc {
+  width: 60%;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
 }
 </style>
diff --git a/pages/login.vue b/pages/login.vue
index ccdd0f7..f5ab34f 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -21,7 +21,6 @@
               :rules="ruleslogin"
               class="mt-5 flex-1"
               @submit.native.prevent
-              @validate="validateLogin"
               v-if="!isRegister"
             >
               <el-form-item :label="$t('username')" prop="username">
@@ -38,7 +37,6 @@
               status-icon
               :rules="rulesRegister"
               @submit.native.prevent
-              @validate="validateLogin"
               ref="registerRef"
               v-else
             >
@@ -54,7 +52,7 @@
               <el-form-item :label="$t('confirmPass')" prop="rePassword">
                 <el-input v-model="registerForm.rePassword" type="password" />
               </el-form-item>
-              <el-form-item :label="t('email')" prop="email">
+              <el-form-item :label="$t('email')" prop="email">
                 <el-input v-model="registerForm.email" />
               </el-form-item>
               <el-form-item :label="$t('verifyCode')" prop="verifyCode">
@@ -92,97 +90,29 @@
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
 import Mirai from '~~/assets/img/mirai.png'
-import { MemberParams } from 'Member'
-import { useUserStore } from '~~/stores/user'
-import { UserApi } from '~~/composables/apis/user'
-import { getCode } from '~~/composables/apis/email'
-import _ from 'lodash'
 
 definePageMeta({
   needLoading: false
 })
 
-const isRegister = ref(false)
-const isSend = ref(false)
-const time = ref(60)
-const registerRef = ref()
-const loginRef = ref()
-const isLoading = ref(false)
-
-const loginForm = reactive<{ username: string; password: string }>({
-  username: '',
-  password: ''
-})
-
-const registerForm = reactive<MemberParams & { rePassword: string }>({
-  username: '',
-  password: '',
-  verifyCode: undefined,
-  memberName: '',
-  rePassword: '',
-  email: ''
-})
-
-const localeRoute = useLocaleRoute()
-const { t } = useI18n()
-const { createMessage } = useMessage()
-const { rulesRegister, ruleslogin } = useLoginRules(registerForm, t)
-
-const goWelcome = () => {
-  const route = localeRoute('/welcome')
-  navigateTo(route?.fullPath)
-}
-
-const getCodeFn = async () => {
-  try {
-    await registerRef.value.validateField('email')
-    isLoading.value = true
-    await getCode(registerForm.email)
-    isSend.value = true
-    const myInternal = setInterval(() => {
-      time.value--
-    }, 1000)
-    setTimeout(() => {
-      isSend.value = false
-      clearInterval(myInternal)
-      time.value = 60
-    }, 60000)
-    createMessage(t('getCodeSuccess'))
-  } catch (error) {
-    //
-  } finally {
-    isLoading.value = false
-  }
-}
-
-const submitFn = async () => {
-  if (isRegister.value) {
-    await registerRef.value.validate()
-    registerForm.verifyCode = parseInt(registerForm.verifyCode!.toString())
-    const form = _.cloneDeep(registerForm)
-    const { data: token } = await UserApi.register(form)
-    if (token) {
-      const userStore = useUserStore()
-      await userStore.setToken(token)
-      await userStore.getUserInfo()
-      const router = useRouter()
-      router.push('/')
-    }
-  } else {
-    await loginRef.value.validate()
-    const form = _.cloneDeep(loginForm)
-    const { data: token } = await UserApi.login(form)
-    if (token) {
-      const userStore = useUserStore()
-      userStore.setToken(token)
-      await userStore.getUserInfo()
-      const router = useRouter()
-      router.push('/')
-    }
-  }
-}
+const {
+  getCodeFn,
+  submitFn,
+  goWelcome,
+  ruleslogin,
+  rulesRegister,
+  loginForm,
+  registerForm,
+  isLoading,
+  loginRef,
+  registerRef,
+  time,
+  isSend,
+  isRegister
+} = useLoginPage()
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/mobile/login.vue b/pages/mobile/login.vue
new file mode 100644
index 0000000..231f617
--- /dev/null
+++ b/pages/mobile/login.vue
@@ -0,0 +1,188 @@
+<template>
+  <div class="bg">
+    <div class="header">
+      <div class="w-60 h-24 cursor-pointer">
+        <MyCustomImage :img="Mirai" @click="goWelcome" />
+      </div>
+    </div>
+    <div class="flex-1 w-full h-full flex justify-center pt-10">
+      <div class="login-container">
+        <div class="form">
+          <div>
+            <p class="title">{{ $t('logintoMMGC') }}</p>
+            <p class="sub-title">{{ $t('MMGCdesc') }}</p>
+          </div>
+          <Transition mode="out-in">
+            <el-form
+              label-position="left"
+              :model="loginForm"
+              status-icon
+              ref="loginRef"
+              :rules="ruleslogin"
+              class="mt-5 flex-1"
+              @submit.native.prevent
+              @validate="validateLogin"
+              v-if="!isRegister"
+            >
+              <el-form-item :label="$t('username')" prop="username">
+                <el-input v-model="loginForm.username" />
+              </el-form-item>
+              <el-form-item :label="$t('password')" prop="password">
+                <el-input v-model="loginForm.password" type="password" />
+              </el-form-item>
+            </el-form>
+            <el-form
+              label-position="left"
+              :model="registerForm"
+              class="mt-5 flex-1"
+              status-icon
+              :rules="rulesRegister"
+              @submit.native.prevent
+              @validate="validateLogin"
+              ref="registerRef"
+              v-else
+            >
+              <el-form-item :label="$t('username')" prop="username">
+                <el-input v-model="registerForm.username" />
+              </el-form-item>
+              <el-form-item :label="$t('password')" prop="password">
+                <el-input v-model="registerForm.password" type="password" />
+              </el-form-item>
+              <el-form-item :label="$t('nickname')" prop="memberName">
+                <el-input v-model="registerForm.memberName" />
+              </el-form-item>
+              <el-form-item :label="$t('confirmPass')" prop="rePassword">
+                <el-input v-model="registerForm.rePassword" type="password" />
+              </el-form-item>
+              <el-form-item :label="t('email')" prop="email">
+                <el-input v-model="registerForm.email" />
+              </el-form-item>
+              <el-form-item :label="$t('verifyCode')" prop="verifyCode">
+                <div class="flex w-full">
+                  <el-input v-model="registerForm.verifyCode" />
+                  <el-button
+                    type="primary"
+                    class="ml-2"
+                    @click="getCodeFn"
+                    :disabled="isSend || isLoading"
+                    :loading="isLoading"
+                    >{{ !isSend ? $t('getCode') : $t('time get', [time]) }}</el-button
+                  >
+                </div>
+              </el-form-item>
+            </el-form>
+          </Transition>
+
+          <div class="text-light-50 self-end">
+            <el-button type="primary" round :dark="true" @click="isRegister = !isRegister">{{
+              isRegister ? $t('login') : $t('register')
+            }}</el-button>
+            <el-button type="primary" round :dark="true" @click="submitFn">{{
+              $t('submit')
+            }}</el-button>
+          </div>
+          <div class="flex items-center justify-self-end">
+            <div class="w-24 h-12">
+              <MyCustomImage :img="Mirai" />
+            </div>
+            <p class="sub-title">{{ $t('dontDoany') }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import Mirai from '~~/assets/img/mirai.png'
+import type { MemberParams } from 'Member'
+import { useUserStore } from '~~/stores/user'
+import { UserApi } from '~~/composables/apis/user'
+import { getCode } from '~~/composables/apis/email'
+import _ from 'lodash'
+
+definePageMeta({
+  needLoading: false
+})
+
+const isRegister = ref(false)
+const isSend = ref(false)
+const time = ref(60)
+const registerRef = ref()
+const loginRef = ref()
+const isLoading = ref(false)
+
+const loginForm = reactive<{ username: string; password: string }>({
+  username: '',
+  password: ''
+})
+
+const registerForm = reactive<MemberParams & { rePassword: string }>({
+  username: '',
+  password: '',
+  verifyCode: undefined,
+  memberName: '',
+  rePassword: '',
+  email: ''
+})
+
+const localeRoute = useLocaleRoute()
+const { t } = useI18n()
+const { createMessage } = useMessage()
+const { rulesRegister, ruleslogin } = useLoginRules(registerForm, t)
+
+const goWelcome = () => {
+  const route = localeRoute('/welcome')
+  navigateTo(route?.fullPath)
+}
+
+const getCodeFn = async () => {
+  try {
+    await registerRef.value.validateField('email')
+    isLoading.value = true
+    await getCode(registerForm.email)
+    isSend.value = true
+    const myInternal = setInterval(() => {
+      time.value--
+    }, 1000)
+    setTimeout(() => {
+      isSend.value = false
+      clearInterval(myInternal)
+      time.value = 60
+    }, 60000)
+    createMessage(t('getCodeSuccess'))
+  } catch (error) {
+    //
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const submitFn = async () => {
+  if (isRegister.value) {
+    await registerRef.value.validate()
+    registerForm.verifyCode = parseInt(registerForm.verifyCode!.toString())
+    const form = _.cloneDeep(registerForm)
+    const { data: token } = await UserApi.register(form)
+    if (token) {
+      const userStore = useUserStore()
+      await userStore.setToken(token)
+      await userStore.getUserInfo()
+      const router = useRouter()
+      router.push('/')
+    }
+  } else {
+    await loginRef.value.validate()
+    const form = _.cloneDeep(loginForm)
+    const { data: token } = await UserApi.login(form)
+    if (token) {
+      const userStore = useUserStore()
+      userStore.setToken(token)
+      await userStore.getUserInfo()
+      const router = useRouter()
+      router.push('/')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/pages/movie/[movieId].vue b/pages/movie/[movieId].vue
index 811f1f9..6feaa73 100644
--- a/pages/movie/[movieId].vue
+++ b/pages/movie/[movieId].vue
@@ -1,232 +1,227 @@
 <template>
   <div class="body" ref="body">
     <MMGCHeader class="flex-shrink-0" />
-    <div class="movie-content" v-if="movieDetail">
-      <div class="flex justify-start w-full">
-        <el-button @click="backToMain">{{ $t('backToMain') }}</el-button>
-      </div>
-      <div class="movie-header">
+    <div class="all-wrapper" v-if="movieDetail">
+      <div class="movie-header flex flex-row items-center justify-between w-full">
         <div class="flex items-center">
-          <p class="movie-title">
-            {{ movieDetail?.movieName[locale] || movieDetail?.movieName['cn'] }}
-          </p>
-        </div>
-        <div>
-          <MemberPop :member-vo="movieDetail?.author" v-if="movieDetail?.author" :size="48" />
-          <p class="sub-title" v-else>{{ $t('author') }}:{{ movieDetail?.authorName }}</p>
-        </div>
-      </div>
-      <div class="movie-tag">
-        <div class="tag-primary" v-if="movieDetail.activityVo">
-          {{ $t('activityMovie', [movieDetail.activityVo.activityId]) }}
-        </div>
-        <div class="tag-day" v-if="movieDetail.activityVo">
-          {{ $t('dayXmovie', [movieDetail.day]) }}
-        </div>
-      </div>
-      <div class="movie-info">
-        <p class="sub-title">{{ $t('uploadAt') }}:{{ movieDetail.createTime }}</p>
-        <p class="sub-title mx-2" v-if="movieDetail.realPublishTime">
-          {{ $t('firstViewTime') }}:{{ movieDetail.realPublishTime }}
-        </p>
-        <div class="flex text-gray-200">
-          <div class="mx-2 info-center">
-            <Icon name="ant-design:like-outlined" />
-            <span>{{ movieDetail.likeNums }}</span>
-          </div>
-          <div class="mx-2 info-center">
-            <Icon name="ant-design:comment-outlined" />
-            <span>{{ movieDetail.commentNums }}</span>
-          </div>
-          <div class="mx-2 info-center">
-            <Icon name="ant-design:profile-outlined" />
-            <span>{{ movieDetail.pollNums }}</span>
-          </div>
-          <div class="mx-2 info-center">
-            <Icon name="ant-design:eye-outlined" />
-            <span>{{ movieDetail.viewNums }}</span>
+          <img
+            src="@/assets/img/left-arrow.png"
+            style="width: 60px"
+            class="left-arrow mr-4 cursor-pointer"
+            @click="backToMain"
+          />
+          <div class="right-title">
+            <div class="flex flex-col">
+              <p class="movie-title">
+                {{ movieDetail?.movieName[locale] || movieDetail?.movieName['cn'] }}
+              </p>
+              <div class="flex">
+                <div class="tag-primary" v-if="movieDetail.activityVo">
+                  {{ $t('activityMovie', [movieDetail.activityVo.activityId]) }}
+                </div>
+                <div class="tag-day" v-if="movieDetail.activityVo">
+                  {{ $t('dayXmovie', [movieDetail.day]) }}
+                </div>
+              </div>
+            </div>
           </div>
         </div>
+
+        <div class="flex items-end self-end justify-end">
+          <p class="sub-title mr-4">
+            {{ $t('author') }}:{{ movieDetail?.authorName || movieDetail?.author?.memberName }}
+          </p>
+          <MemberPop :member-vo="movieDetail?.author" v-if="movieDetail?.author" :size="36" />
+        </div>
       </div>
-      <div class="movie-play">
-        <Aplayer
-          :video-url="playSource"
-          v-if="movieDetail?.moviePlaylink"
-          :cover="movieDetail.movieCover"
-        ></Aplayer>
-      </div>
-      <div class="movie-oper">
-        <div class="flex">
-          <div class="flex items-center operitem" @click="likeOrUnLike(movieDetail)">
-            <template v-if="movieDetail.loginVo?.isLike">
-              <Icon name="ant-design:like-filled" class="text-3xl" />
-              <p class="operitem-font">{{ movieDetail.likeNums }}</p>
-            </template>
-            <template v-else>
-              <Icon name="ant-design:like-outlined" class="text-3xl" />
-              <p class="operitem-font">{{ $t('like') }}</p>
-            </template>
-          </div>
-          <div class="flex items-center mx-2 operitem" @click="pollMovie(movieDetail)">
-            <template v-if="movieDetail.loginVo?.isPoll">
-              <Icon name="ant-design:profile-filled" class="text-3xl" />
-              <p class="operitem-font">{{ movieDetail.pollNums }}</p>
-            </template>
-            <template v-else>
-              <Icon name="ant-design:profile-outlined" class="text-3xl" />
-              <p class="operitem-font">{{ $t('polls') }}</p>
-            </template>
+      <div class="under flex w-full">
+        <div class="underleft">
+          <div class="movie-play">
+            <Aplayer
+              :video-url="playSource"
+              v-if="movieDetail?.moviePlaylink"
+              :cover="movieDetail.movieCover"
+            ></Aplayer>
           </div>
-        </div>
-        <div class="download-or-other">
-          <div
-            class="flex items-center mr-4 justify-center"
-            v-if="movieDetail.movieLink && snsSites.length > 0"
-          >
-            <p class="mr-2">{{ $t('otherView') }}</p>
-            <div>
-              <div class="flex flex-wrap">
-                <div
-                  v-for="item in snsSites"
-                  :key="item.value"
-                  class="cursor-pointer"
-                  :title="`${$t('clickJump')} ${item.value}`"
-                  @click="openlink(item.value)"
-                >
-                  <Icon :name="item.icon" :style="{ color: item.color }" size="24px" class="mr-1" />
+          <div class="flex flex-col">
+            <div class="movie-oper">
+              <div class="flex">
+                <div class="operitem">
+                  <Icon name="ant-design:eye-outlined" class="text-3xl" />
+                  <span class="operitem-font">{{ movieDetail.viewNums }}</span>
                 </div>
-              </div>
-            </div>
-          </div>
-          <div v-if="movieDetail.movieDownloadLink">
-            <el-popover
-              placement="top-start"
-              :width="160"
-              trigger="click"
-              popper-class="popover"
-              transition="popshow"
-            >
-              <template #reference>
-                <p class="download">Download</p>
-              </template>
-              <div class="download-list flex flex-wrap justify-between items-center">
-                <div
-                  v-if="movieDetail?.movieDownloadLink?.google"
-                  class="down-item down-google text-5xl cursor-pointer mx-2"
-                  :title="$t('googleDownload', [movieDetail.movieDownloadLink.google])"
-                  @click="openlink(movieDetail?.movieDownloadLink?.google || '')"
-                >
-                  <Icon name="logos:google-drive" />
+                <div class="mx-2 operitem">
+                  <Icon name="ant-design:comment-outlined" class="text-3xl" />
+                  <span class="operitem-font">{{ movieDetail.commentNums }}</span>
                 </div>
-                <div
-                  v-if="movieDetail?.movieDownloadLink?.baidu"
-                  class="down-item down-google text-5xl cursor-pointer mx-2"
-                  :title="$t('baiduDownload', [movieDetail.movieDownloadLink.baidu])"
-                  @click="openlink(movieDetail?.movieDownloadLink?.baidu || '')"
-                >
-                  <Icon name="simple-icons:baidu" class="text-blue-600" />
+                <div class="flex items-center operitem" @click="likeOrUnLike(movieDetail)">
+                  <Icon
+                    :name="
+                      movieDetail.loginVo?.isLike
+                        ? 'ant-design:like-filled'
+                        : 'ant-design:like-outlined'
+                    "
+                    class="text-3xl"
+                  />
+                  <p class="operitem-font">{{ movieDetail.likeNums }}</p>
                 </div>
-                <div
-                  v-if="movieDetail?.movieDownloadLink?.onedrive"
-                  class="down-item down-google text-5xl cursor-pointer mx-2"
-                  :title="$t('microsoftDownload', [movieDetail.movieDownloadLink.onedrive])"
-                  @click="openlink(movieDetail?.movieDownloadLink?.onedrive || '')"
-                >
-                  <Icon name="logos:microsoft-onedrive" />
+                <div class="flex items-center mx-2 operitem" @click="pollMovie(movieDetail)">
+                  <Icon
+                    :name="
+                      movieDetail.loginVo?.isPoll
+                        ? 'ant-design:profile-filled'
+                        : 'ant-design:profile-outlined'
+                    "
+                    class="text-3xl"
+                  />
+                  <p class="operitem-font">{{ movieDetail.pollNums }}</p>
                 </div>
+              </div>
+              <div class="download-or-other">
                 <div
-                  v-if="movieDetail?.movieDownloadLink?.google"
-                  class="down-item down-google text-5xl cursor-pointer mx-2"
-                  :title="$t('otherDownload', [movieDetail.movieDownloadLink.other])"
-                  @click="openlink(movieDetail?.movieDownloadLink?.other || '')"
+                  class="flex items-center mr-4 justify-center"
+                  v-if="movieDetail.movieLink && snsSites.length > 0"
                 >
-                  <Icon name="material-symbols:link-rounded" class="text-green-600" />
+                  <p class="mr-2">{{ $t('otherView') }}</p>
+                  <div>
+                    <div class="flex flex-wrap">
+                      <div
+                        v-for="item in snsSites"
+                        :key="item.value"
+                        class="cursor-pointer"
+                        :title="`${$t('clickJump')} ${item.value}`"
+                        @click="openlink(item.value)"
+                      >
+                        <Icon
+                          :name="item.icon"
+                          :style="{ color: item.color }"
+                          size="24px"
+                          class="mr-1"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div v-if="movieDetail.movieDownloadLink">
+                  <el-popover
+                    placement="top-start"
+                    :width="160"
+                    trigger="click"
+                    popper-class="popover"
+                    transition="popshow"
+                  >
+                    <template #reference>
+                      <p class="tag-day cursor-pointer">Download</p>
+                    </template>
+                    <div class="download-list flex flex-wrap justify-between items-center">
+                      <div
+                        v-if="movieDetail?.movieDownloadLink?.google"
+                        class="down-item down-google text-5xl cursor-pointer mx-2"
+                        :title="$t('googleDownload', [movieDetail.movieDownloadLink.google])"
+                        @click="openlink(movieDetail?.movieDownloadLink?.google || '')"
+                      >
+                        <Icon name="logos:google-drive" />
+                      </div>
+                      <div
+                        v-if="movieDetail?.movieDownloadLink?.baidu"
+                        class="down-item down-google text-5xl cursor-pointer mx-2"
+                        :title="$t('baiduDownload', [movieDetail.movieDownloadLink.baidu])"
+                        @click="openlink(movieDetail?.movieDownloadLink?.baidu || '')"
+                      >
+                        <Icon name="simple-icons:baidu" class="text-blue-600" />
+                      </div>
+                      <div
+                        v-if="movieDetail?.movieDownloadLink?.onedrive"
+                        class="down-item down-google text-5xl cursor-pointer mx-2"
+                        :title="$t('microsoftDownload', [movieDetail.movieDownloadLink.onedrive])"
+                        @click="openlink(movieDetail?.movieDownloadLink?.onedrive || '')"
+                      >
+                        <Icon name="logos:microsoft-onedrive" />
+                      </div>
+                      <div
+                        v-if="movieDetail?.movieDownloadLink?.google"
+                        class="down-item down-google text-5xl cursor-pointer mx-2"
+                        :title="$t('otherDownload', [movieDetail.movieDownloadLink.other])"
+                        @click="openlink(movieDetail?.movieDownloadLink?.other || '')"
+                      >
+                        <Icon name="material-symbols:link-rounded" class="text-green-600" />
+                      </div>
+                    </div>
+                  </el-popover>
                 </div>
               </div>
-            </el-popover>
+            </div>
+            <div class="infomation flex mt-2 ml-2">
+              <p class="sub-title">{{ $t('uploadAt') }}:{{ movieDetail.createTime }}</p>
+              <p class="sub-title mx-2" v-if="movieDetail.realPublishTime">
+                {{ $t('firstViewTime') }}:{{ movieDetail.realPublishTime }}
+              </p>
+            </div>
+            <p
+              class="ml-2 text-light-50 break-all overflow-auto"
+              :title="movieDetail.movieDesc[locale] || movieDetail.movieDesc['cn']"
+            >
+              {{ t('descriable') }}：{{
+                movieDetail.movieDesc[locale] || movieDetail.movieDesc['cn']
+              }}
+            </p>
           </div>
         </div>
-      </div>
-      <div class="movie-desc">
-        <div class="left">
-          <p class="title">{{ $t('detailInfo') }}</p>
-          <p class="desc my-2">
-            {{ $t('desc') }}:{{ movieDetail.movieDesc[locale] || movieDetail.movieDesc['cn'] }}
-          </p>
-          <p class="sub-title">
-            {{ $t('belongMatch') }}:{{
-              movieDetail.activityVo?.activityName[locale] ||
-              movieDetail.activityVo?.activityName.cn
-            }}
-          </p>
-          <p class="sub-title">
-            {{ $t('author') }}:{{
-              movieDetail.author ? movieDetail.author.memberName : movieDetail.authorName || ''
-            }}
-          </p>
-        </div>
-      </div>
-      <div class="movie-activity-other" v-if="movieDetail.activityVo && movies.length > 0">
-        <p class="title">{{ $t('otherMovie', [movieDetail.day]) }}</p>
-        <div class="movie-list">
-          <div v-for="item in movies" :key="item.movieId" class="flex-shrink-0 w-96 mr-3">
-            <MovieListCard :movie-item="item" />
+        <div class="underright">
+          <div class="movie-comment-area ml-4">
+            <p class="comment-area-title text-light-50 flex items-center mb-2">
+              <span class="mark block"></span>Comment Area ({{ total }})
+            </p>
+            <div class="flex-1 overflow-auto review-area">
+              <ElEmpty :description="$t('noComment')" v-if="comments.length === 0" />
+              <template v-else>
+                <ReviewItem
+                  v-for="comment in comments"
+                  :key="comment.commentId"
+                  :movie-detail="movieDetail"
+                  :comment="comment"
+                  :topPrarentId="comment.commentId"
+                  :level="1"
+                  @refresh="getCommentList"
+                >
+                </ReviewItem>
+              </template>
+            </div>
+            <ElPagination
+              layout="prev, pager, next"
+              :total="total"
+              v-model:page-size="pageParam.pageSize"
+              v-model:current-page="pageParam.page"
+            />
+            <div class="relative">
+              <ElInput
+                placeholder="请输入评论吧~"
+                :rows="2"
+                v-model="content"
+                type="textarea"
+                resize="none"
+                @focus="isFocus = true"
+                @blur="isFocus = false"
+              ></ElInput>
+              <ElButton type="danger" @click="sentComment" size="small" class="button"
+                >评!</ElButton
+              >
+            </div>
           </div>
         </div>
       </div>
-      <div class="movie-comment">
-        <p class="title">{{ $t('commentArea') }}</p>
-        <ElInput
-          type="textarea"
-          :autosize="{ minRows: 3, maxRows: 5 }"
-          show-word-limit
-          maxlength="512"
-          :placeholder="$t('sentCommentin')"
-          v-model:model-value="content"
-        />
-        <ElButton
-          type="primary"
-          class="self-end mt-2"
-          @click="sentComment"
-          :disabled="!userInfo?.memberId || !content || content.length > 512"
-          >{{ $t('sendComment') }}</ElButton
-        >
-      </div>
-      <div class="movie-comment-area">
-        <ElEmpty :description="$t('noComment')" v-if="comments.length === 0" />
-        <template v-else>
-          <CommentItem
-            v-for="comment in comments"
-            :key="comment.commentId"
-            :movie-detail="movieDetail"
-            :comment="comment"
-            :topPrarentId="comment.commentId"
-            :level="1"
-            @refresh="getComment"
-            @sent-reply="getComment"
-          >
-          </CommentItem>
-        </template>
-        <ElPagination
-          layout="prev, pager, next"
-          :total="total"
-          v-model:page-size="pageParam.pageSize"
-          v-model:current-page="pageParam.page"
-        />
-      </div>
     </div>
     <p class="title" v-else>{{ $t('noOpen') }}</p>
   </div>
 </template>
 
 <script setup lang="ts">
-import { MovieVo } from 'Movie'
+import type { MovieVo } from 'Movie'
 import { getMovieByActivityId, getMovieDetailById } from '~~/composables/apis/movie'
-import { likeVideo, cancelVideoLike, pollVideo } from '~~/composables/apis/oper'
 import { addComment, getCommentList } from '~~/composables/apis/comment'
 import { useGlobalStore } from '~~/stores/global'
 import { useUserStore } from '~~/stores/user'
-import { CommentVo } from 'Comment'
+import type { CommentVo } from 'Comment'
 import _ from 'lodash'
 
 const route = useRoute()
@@ -236,11 +231,13 @@ const openlink = useOpenLink()
 const snsSites = ref()
 const body = ref()
 const content = ref('')
+const isFocus = ref(false)
 
 const { locale } = useCurrentLocale()
 const { t } = useI18n()
 const { userInfo } = useUserStore()
 const localeNaviGate = useLocaleNavigate()
+const { unloading } = useGlobalStore()
 const { currentActivityData } = useGlobalStore()
 const { pollMovie, likeOrUnLike } = useMovieOperate()
 
@@ -302,7 +299,7 @@ const sentComment = async () => {
     ElMessage.warning(t('commentContentEmpty'))
     return
   }
-  const { data } = await addComment({
+  await addComment({
     content: content.value,
     movieId: movieId.value
   })
@@ -325,8 +322,9 @@ const getComment = async (prams?: any) => {
 }
 
 watchEffect(() => {
-  getMovieDetail(movieId.value).then(() => {
-    getVideoByDay()
+  getMovieDetail(movieId.value).then(async () => {
+    await getVideoByDay()
+    unloading()
   })
 })
 
@@ -350,6 +348,7 @@ onMounted(async () => {
   .body {
     width: 100%;
     min-height: 100vh;
+    height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -359,28 +358,79 @@ onMounted(async () => {
     background-attachment: fixed;
     filter: brightness(0.8);
     min-width: 320px;
-    .movie-content {
-      width: 96%;
+    .all-wrapper {
+      width: 94%;
+      height: calc(100% - 128px);
       display: flex;
       flex-direction: column;
+      align-items: start;
+      overflow: auto;
+      .under {
+        height: calc(100% - 80px);
+        .underleft {
+          width: 75%;
+          height: 100%;
+          overflow: hidden;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          .movie-play {
+            border-radius: 20px;
+            overflow: hidden;
+            width: 100%;
+            height: 80%;
+            flex: 1;
+          }
+        }
+        .underright {
+          flex: 1;
+          .movie-comment-area {
+            height: 100%;
+            border-radius: 20px;
+            background-color: #131313;
+            padding: 16px;
+            display: flex;
+            flex-direction: column;
+            .review-area {
+              max-height: calc(100% - 120px);
+              flex: 1;
+              overflow: auto;
+            }
+            .mark {
+              background-color: #ffacac;
+              border-radius: 20px;
+              width: 15px;
+              height: 10px;
+              margin-right: 4px;
+            }
+            .button {
+              position: absolute;
+              right: 8px;
+              bottom: 5px;
+            }
+          }
+        }
+      }
 
       .movie-header {
         display: flex;
-        flex-direction: column;
         align-items: center;
-        justify-content: space-between;
+        margin-bottom: 12px;
         .movie-title {
-          color: $themeColor;
-          font-size: $veryBigFontSize;
+          font-size: $bigFontSize;
+          color: white;
           font-weight: 600;
         }
+        .left-arrow {
+          border-radius: 9px;
+          background-color: $hintColor;
+          &:hover {
+            transition: all ease 0.2s;
+            background-color: #ff5454;
+          }
+        }
       }
-      .movie-tag {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        margin: 3px 0;
-      }
+
       .movie-info {
         display: flex;
         align-items: center;
@@ -390,27 +440,19 @@ onMounted(async () => {
           align-items: center;
         }
       }
-      .movie-play {
-        border-radius: 20px;
-        overflow: hidden;
-        height: 300px;
-        margin-top: 10px;
-        width: 100%;
-      }
+
       .popover {
         padding: 0;
       }
       .movie-oper {
         margin-top: 5px;
         display: flex;
-        flex-direction: column;
         justify-content: space-between;
         align-items: center;
         font-size: $midFontSize;
         color: $themeColor;
         .download-or-other {
           display: flex;
-          flex-direction: column;
           align-items: center;
           .download {
             font-size: $bigFontSize;
@@ -424,21 +466,14 @@ onMounted(async () => {
           font-size: $smallFontSize;
           padding: 4px 8px;
           cursor: pointer;
-          width: 90px;
           position: relative;
           transition: all ease 0.3s;
           &:hover {
-            color: $whiteColor;
-            background-color: $secondryColor;
-            width: 100px;
-            .operitem-font {
-              opacity: 1;
-              left: 60px;
-            }
+            background-color: $themeColor;
+            color: white;
           }
-          &.active {
-            color: $whiteColor;
-            background-color: $secondryColor;
+          &-font {
+            margin-left: 4px;
           }
         }
       }
@@ -457,59 +492,11 @@ onMounted(async () => {
           font-size: $smallFontSize;
         }
       }
-      .movie-comment {
-        display: flex;
-        flex-direction: column;
-        &-area {
-          display: flex;
-          flex-direction: column;
-          margin-top: 20px;
-          margin-bottom: 10px;
-        }
-      }
     }
   }
 }
 
-@media screen and (min-width: 1024px) {
-  .body {
-    min-width: 1024px;
-
-    .movie-content {
-      width: 70%;
-      .movie-play {
-        height: 600px;
-      }
-      .movie-header {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-      }
-      .movie-tag {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-        margin: 3px 0;
-      }
-      .movie-info {
-        display: flex;
-        align-items: center;
-        flex-direction: row;
-        .info-center {
-          display: inline-flex;
-          align-items: center;
-        }
-      }
-      .movie-oper {
-        flex-direction: row;
-        .download-or-other {
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-        }
-      }
-    }
-  }
+:deep(.el-textarea__inner) {
+  border-radius: 14px;
 }
 </style>
diff --git a/stores/global.ts b/stores/global.ts
index 69f8534..b5e78f8 100644
--- a/stores/global.ts
+++ b/stores/global.ts
@@ -1,4 +1,4 @@
-import { ActivityVo } from 'Activity'
+import type { ActivityVo } from 'Activity'
 import { defineStore } from 'pinia'
 import { getActivityDetail } from '~~/composables/apis/activity'
 import { getConfig } from '~~/composables/apis/config'
diff --git a/stores/user.ts b/stores/user.ts
index b714d90..2c19288 100644
--- a/stores/user.ts
+++ b/stores/user.ts
@@ -1,6 +1,6 @@
 import { UserApi } from './../composables/apis/user'
 import _ from 'lodash'
-import { MemberVo } from 'Member'
+import type { MemberVo } from 'Member'
 import { defineStore } from 'pinia'
 const maxAge = 1 * 60 * 60 * 24 * 2
 const expires = new Date(Date.now() + maxAge * 1000)
diff --git a/types/comment.type.ts b/types/comment.type.ts
index be38237..6732ec5 100644
--- a/types/comment.type.ts
+++ b/types/comment.type.ts
@@ -1,5 +1,5 @@
 declare module 'Comment' {
-  import { MemberVo } from 'Member'
+  import type { MemberVo } from 'Member'
   interface CommentModel {
     commentId: number
     content: string // 评论内容
diff --git a/types/global.ts b/types/global.ts
index 73f9070..33904da 100644
--- a/types/global.ts
+++ b/types/global.ts
@@ -1,4 +1,4 @@
-import { MemberVo } from 'Member'
+import type { MemberVo } from 'Member'
 
 declare global {
   type NormalObject = {
diff --git a/types/movie.type.ts b/types/movie.type.ts
index 723bc64..2a6100e 100644
--- a/types/movie.type.ts
+++ b/types/movie.type.ts
@@ -1,133 +1,134 @@
 declare module 'Movie' {
-	import { ActivityVo } from 'Activity'
-	import { MemberVo } from 'Member'
+  import type { ActivityVo } from 'Activity'
+  import type { MemberVo } from 'Member'
 
-	interface MovieModel {
-		/**
-		 * 关联活动id 如果不存在则为非活动作品
-		 */
-		activityId: null | number
-		/**
-		 * 作者id 可以关联本站拥有的用户 如果不存在可以输入作者名
-		 */
-		authorId: null | number
-		/**
-		 * 如果不存在id 则优先使用这个
-		 */
-		authorName: null | string
-		/**
-		 * 评论次数
-		 */
-		commentNums: number
-		/**
-		 * 上传时间 自动生成
-		 */
-		createTime: null | string | number
-		/**
-		 * 假设关联了活动 那么这个movie就会有所属日
-		 */
-		day: number | null
-		/**
-		 * 期望播放时间 未到达时间不会展示在列表中
-		 */
-		expectPlayTime: null | string
-		/**
-		 * 0 非原创 1 原创
-		 */
-		isOrigin: number
-		/**
-		 * 点赞数量
-		 */
-		likeNums: number
-		/**
-		 * cover 视频封面
-		 */
-		movieCover: string
-		/**
-		 * 影片介绍 分三语
-		 */
-		movieDesc: I18N
-		/**
-		 * 影片的下载链接 使用各种网盘存放
-		 */
-		movieDownloadLink: null | DownloadLink
-		/**
-		 * 影片id
-		 */
-		movieId: number
-		/**
-		 * 影片的播放链接 分各种平台
-		 */
-		movieLink: null | Sns
-		/**
-		 * 影片名 分三语存放
-		 */
-		movieName: I18N
-		/**
-		 * 三语播放i18n列表 适用于有多个源的情况下
-		 */
-		moviePlaylink: I18N
-		/**
-		 * 票数 仅用于活动作品 统计投票次数 一个人单日只能投一个作品
-		 */
-		pollNums: number
-		/**
-		 * 实际发布时间 用户填写
-		 */
-		realPublishTime: null | string
-		/**
-		 * 上传者id
-		 */
-		uploader: number
-		/**
-		 * 播放次数
-		 */
-		viewNums: number
-	}
+  interface MovieModel {
+    /**
+     * 关联活动id 如果不存在则为非活动作品
+     */
+    activityId: null | number
+    /**
+     * 作者id 可以关联本站拥有的用户 如果不存在可以输入作者名
+     */
+    authorId: null | number
+    /**
+     * 如果不存在id 则优先使用这个
+     */
+    authorName: null | string
+    /**
+     * 评论次数
+     */
+    commentNums: number
+    /**
+     * 上传时间 自动生成
+     */
+    createTime: null | string | number
+    /**
+     * 假设关联了活动 那么这个movie就会有所属日
+     */
+    day: number | null
+    /**
+     * 期望播放时间 未到达时间不会展示在列表中
+     */
+    expectPlayTime: null | string
+    /**
+     * 0 非原创 1 原创
+     */
+    isOrigin: number
+    /**
+     * 点赞数量
+     */
+    likeNums: number
+    /**
+     * cover 视频封面
+     */
+    movieCover: string
+    /**
+     * 影片介绍 分三语
+     */
+    movieDesc: I18N
+    /**
+     * 影片的下载链接 使用各种网盘存放
+     */
+    movieDownloadLink: null | DownloadLink
+    /**
+     * 影片id
+     */
+    movieId: number
+    /**
+     * 影片的播放链接 分各种平台
+     */
+    movieLink: null | Sns
+    /**
+     * 影片名 分三语存放
+     */
+    movieName: I18N
+    /**
+     * 三语播放i18n列表 适用于有多个源的情况下
+     */
+    moviePlaylink: I18N
+    /**
+     * 票数 仅用于活动作品 统计投票次数 一个人单日只能投一个作品
+     */
+    pollNums: number
+    /**
+     * 实际发布时间 用户填写
+     */
+    realPublishTime: null | string
+    /**
+     * 上传者id
+     */
+    uploader: number
+    /**
+     * 播放次数
+     */
+    viewNums: number
+  }
 
-	type MovieParams = Pick<MovieModel, 'movieCover' | 'movieName' | 'movieDesc' | 'moviePlaylink'> &
-		Partial<
-			Pick<
-				MovieModel,
-				| 'movieLink'
-				| 'movieDownloadLink'
-				| 'authorId'
-				| 'authorName'
-				| 'realPublishTime'
-				| 'expectPlayTime'
-				| 'activityId'
-				| 'day'
-				| 'isOrigin'
-			>
-		>
+  type MovieParams = Pick<MovieModel, 'movieCover' | 'movieName' | 'movieDesc' | 'moviePlaylink'> &
+    Partial<
+      Pick<
+        MovieModel,
+        | 'movieLink'
+        | 'movieDownloadLink'
+        | 'authorId'
+        | 'authorName'
+        | 'realPublishTime'
+        | 'expectPlayTime'
+        | 'activityId'
+        | 'day'
+        | 'isOrigin'
+      >
+    >
 
-	interface MovieUpdateParams extends MovieParams {
-		movieId: number
-	}
-	interface MovieVo extends Required<Omit<MovieModel, 'activityId' | 'authorId' | 'uploader' | 'expectPlayTime'>> {
-		/**
-		 * 活动VO类型
-		 */
-		activityVo: ActivityVo | null
-		/**
-		 * 标记视频的一些状态
-		 */
-		loginVo: LoginVo | null
-		/**
-		 * 上传者信息
-		 */
-		uploader: MemberVo | null
-		/**
-		 * 实际原作者信息
-		 */
-		author: MemberVo | null
-		/**
-		 * 是否为原创作品
-		 */
-		isActivityMovie: boolean | null
-		/**
-		 * 是否为已公开作品
-		 */
-		isPublic: boolean | null
-	}
+  interface MovieUpdateParams extends MovieParams {
+    movieId: number
+  }
+  interface MovieVo
+    extends Required<Omit<MovieModel, 'activityId' | 'authorId' | 'uploader' | 'expectPlayTime'>> {
+    /**
+     * 活动VO类型
+     */
+    activityVo: ActivityVo | null
+    /**
+     * 标记视频的一些状态
+     */
+    loginVo: LoginVo | null
+    /**
+     * 上传者信息
+     */
+    uploader: MemberVo | null
+    /**
+     * 实际原作者信息
+     */
+    author: MemberVo | null
+    /**
+     * 是否为原创作品
+     */
+    isActivityMovie: boolean | null
+    /**
+     * 是否为已公开作品
+     */
+    isPublic: boolean | null
+  }
 }