页面细节优化

src/assets/scss/mengyuu/global/size.scss

@@ -10,16 +10,16 @@ $full-width: 100vh;
 	//数字形式 : height-100 表示100rpx; height-5 表示5rpx，等等
 	@each $key, $w in $exact-sizes {
 		&-#{''+$key} {
-			height: $w;
+			height: $w!important;
 		}
 	}
 }
 .width {
 	&-auto {
-		width: auto;
+		width: auto!important;
 	}
 	&-full {
-		width: $full-width;
+		width: $full-width!important;
 	}
 	&-half {
 		width: $full-width*0.5;
@@ -46,12 +46,12 @@ $full-width: 100vh;
 	//数字形式: width-1-2 表示 二分之一； width-4-9 表示 9分之4，等等
 	@for $i from 2 to 10 {
 		&-1-#{$i} {
-			width: math.percentage(math.div(1, $i));
+			width: math.percentage(math.div(1, $i))!important;
 		}
 		
 		@for $j from 2 to $i {
 			&-#{$j}-#{$i} {
-				width: $full-width*math.div($j, $i);
+				width: $full-width*math.div($j, $i)!important;
 			}
 		}
 	}
@@ -59,14 +59,14 @@ $full-width: 100vh;
 	//数字形式 2: width-100 表示100rpx; width-5 表示5rpx，等等
 	@each $key, $w in $exact-sizes {
 		&-#{''+$key} {
-			width: $w;
+			width: $w!important;
 		}
 	}
 }
 .size {
 	@each $key, $size in $font-sizes {
 		&-#{''+$key} {
-			font-size: $size;
+			font-size: $size!important;
 		}
 	}
 }

src/components/3d/Viewer.vue

@@ -35,27 +35,41 @@ function init() {
   scene = new THREE.Scene();
   camera = new THREE.PerspectiveCamera( 75, container.clientWidth / container.clientHeight, 0.1, 1000 );
   camera.position.set(10, 10, 10);
-  
+
   const color = 0xFFFFFF;
-  const intensity = 3;
-  const light = new THREE.AmbientLight(color, intensity);
+  const light0 = new THREE.AmbientLight(color, 1);
+  scene.add(light0);
+
+
+  const light = new THREE.DirectionalLight(color, 5);
+  light.position.set(0, 15, -20);
+  light.target.position.set(0, 0, 0);
   scene.add(light);
+  scene.add(light.target);
+
+  const light2 = new THREE.DirectionalLight(color, 5);
+  light2.position.set(0, 15, 20);
+  light2.target.position.set(0, 0, 0);
+  scene.add(light2);
+  scene.add(light2.target);
+
+  function animate() {
+    if (controls)
+      controls.update();
+    if (renderer && scene && camera)
+      renderer.render(scene, camera);
+  }
 
   renderer = new THREE.WebGLRenderer({ alpha: true });
   renderer.setAnimationLoop(animate);
   renderer.setSize(container.clientWidth, container.clientHeight);
 
-  container.appendChild( renderer.domElement );
-
   controls = new OrbitControls(camera, renderer.domElement);
+  controls.autoRotate = true;
+  controls.autoRotateSpeed = 1;
   controls.update();
 
-  function animate() {
-    controls.update();
-
-    if (renderer && scene && camera)
-      renderer.render(scene, camera);
-  }
+  container.appendChild(renderer.domElement);
 
   setTimeout(() => {
     if (props.path)

src/components/small/Box2.vue

@@ -41,6 +41,7 @@ const props = defineProps({
     border: 1px solid var(--color-border);
     width: calc(100%);
     height: calc(100%);
+    background-color: rgba(#fff9e6, 0.5);
   }
 }
 </style>

src/components/small/HoriontalLargeList.vue

@@ -13,6 +13,7 @@
           :class="['item', { 'active': activeItem === index }]"
           :id="'listItem' + index" 
           round
+          tabindex="0"
           @click="onItemClick(item, index)"
         >
           <div v-if="item.tag" class="tag">{{ item.tag }}</div>

src/components/small/ImageGrid.vue

@@ -18,6 +18,7 @@
           borderRadius: '5px',
           objectFit: 'cover',
         }"
+        tabindex="0"
         @click="()=>emit('itemClick', v)"
       />
     </slot>

src/components/small/ImageLine.vue

@@ -18,6 +18,7 @@
           borderRadius: '5px',
           objectFit: 'cover',
         }"
+        tabindex="0"
         @click="()=>emit('itemClick', v)"
       />
     </slot>
@@ -30,6 +31,7 @@
         borderRadius: '5px',
         objectFit: 'cover',
       }"
+      tabindex="0"
       @click="()=>emit('moreClick')"
     >
       <div class="w-100 h-100 bg-light d-flex flex-column align-center justify-center">

src/components/small/ImagePreview.vue

@@ -5,7 +5,7 @@
   >
     <div class="dialog bg-light p-4 d-flex flex-col">
       <div class="d-flex flex-row align-center ">
-        <img class="main-image-button" src="@/assets/images/IconBack.png" @click="emit('update:show', false)"></img>
+        <img class="main-image-button" src="@/assets/images/IconBack.png" tabindex="0" @click="emit('update:show', false)"></img>
         <h2 class="mb-0 ml-3">查看大图</h2>
       </div>
       <ScrollLeftRightButton

src/components/small/ScrollLeftRightButton.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <img src="@/assets/images/ButtonLeft.png" @click="scrollLr('left')" />
+    <img src="@/assets/images/ButtonLeft.png" tabindex="0" @click="scrollLr('left')" />
     <slot />
-    <img src="@/assets/images/ButtonRight.png" @click="scrollLr('right')" />
+    <img src="@/assets/images/ButtonRight.png" tabindex="0" @click="scrollLr('right')" />
   </div>
 </template>
 
@@ -53,5 +53,8 @@ img {
   &:active {
     transform: scale(0.9);
   }
+  &:focus {
+    outline: 2px solid #444;
+  }
 }
 </style>

src/components/small/ScrollLeftRightButton2.vue

@@ -1,12 +1,16 @@
 <template>
   <div class="d-flex flex-col container">
     <slot />
-    <div class="d-flex flex-row align-center">
-      <img src="@/assets/images/ButtonLeft.png" @click="scrollLr('left')" />
-      <img src="@/assets/images/ImageDotRight.png" class="dot" @click="scrollLr('left')" />
+    <div class="d-flex flex-row align-center bar">
+      <div class="btn" tabindex="0">
+        <img src="@/assets/images/ButtonLeft.png" @click="scrollLr('left')" />
+        <img src="@/assets/images/ImageDotRight.png" class="dot" @click="scrollLr('left')" />
+      </div>
       <div class="w-20 flex-shrink-0"></div>
-      <img src="@/assets/images/ImageDotLeft.png" class="dot" @click="scrollLr('right')" />
-      <img src="@/assets/images/ButtonRight.png" @click="scrollLr('right')" />
+      <div class="btn" tabindex="0">
+        <img src="@/assets/images/ImageDotLeft.png" class="dot" @click="scrollLr('right')" />
+        <img src="@/assets/images/ButtonRight.png" @click="scrollLr('right')" />
+      </div>
     </div>
   </div>
 </template>
@@ -50,17 +54,28 @@ function scrollLr(direction: 'left' | 'right') {
 <style lang="scss" scoped>
 .container {
   padding-top: 60px;
+
+  .btn {
+    cursor: pointer;
+
+    &:active {
+      transform: scale(0.9);
+    }
+    &:focus {
+      outline: 2px solid #444;
+    }
+  }
+}
+.bar {
+  width: 350px;
+  margin-right: 50px;
 }
+
 img {
   flex-shrink: 0;
   width: 60px;
   height: 60px;
   margin: 0 20px;
-  cursor: pointer;
-
-  &:active {
-    transform: scale(0.9);
-  }
 
   &.dot {
     width: 40px;

src/components/small/TabNav.vue

@@ -9,6 +9,7 @@
       ]"
       v-for="(tab, index) in tabs" 
       :key="index"
+      tabindex="0"
       @click="$emit('update:activeIndex', index)"
     >
       {{ tab.label }}

src/router/index.ts

@@ -99,6 +99,11 @@ const router = createRouter({
       name: 'ArtifactSubPartModelDetail',
       component: () => import('../views/ArtifactSubPartModelDetailView.vue'),
     },
+    {
+      path: '/volunteer',
+      name: 'Volunteer',
+      component: () => import('../views/VolunteerView.vue'),
+    },
   ],
 })
 

src/views/AnswerView.vue

@@ -98,7 +98,7 @@ async function nextQuestion() {
         <Box2 v-if="isShowRank" class="list w-70 mt-3">
           <div class="d-flex flex-col p-4 bg-light text-align-center h-100">
             <div class="d-flex flex-row justify-between align-center">
-              <img class="main-image-button" src="@/assets/images/IconBack.png" @click="quitAnswer"></img>
+              <img class="main-image-button" src="@/assets/images/IconBack.png" tabindex="0" @click="quitAnswer"></img>
               <h4>排行榜</h4>
               <div class="main-image-button"></div>
             </div>
@@ -143,7 +143,7 @@ async function nextQuestion() {
             <button class="mt-3" @click="showRank">查看排行榜</button>
           </div>
           <div v-else class="d-flex flex-col p-4 bg-light">
-            <img class="main-image-button" src="@/assets/images/IconBack.png" @click="quitAnswer"></img>
+            <img class="main-image-button" src="@/assets/images/IconBack.png" tabindex="0" @click="quitAnswer"></img>
             <template v-if="currentQuestion">
               <div class="d-flex flex-row justify-content-between align-center mt-3">
                 <span class="border-all-dark p-2 mr-3 flex-shrink-0">{{ currentQuestion.seq }} / {{ currentQuestion.leftCount }}</span>

src/views/ArtifactDetailView.vue

@@ -65,6 +65,7 @@ const previewShow = ref(false);
                     <img 
                       :src="item" class="w-100 radius-base object-fit-cover bg-forth"
                       :style="{ minHeight: '300px' }" 
+                      tabindex="0"
                       @click="previewShow = true"
                     />
                   </template>
@@ -98,6 +99,7 @@ const previewShow = ref(false);
                       <div 
                         class="position-relative d-flex flex-col align-center justify-center cursor-pointer"
                         :style="{ width, height }"
+                        tabindex="0"
                         @click="category.handleNav(item)"
                       >
                         <img :src="url" class="w-100 radius-base object-fit-cover bg-forth" :style="{ minHeight: '150px' }" />

src/views/ArtifactModelDetailView.vue

@@ -58,6 +58,7 @@ const previewShow = ref(false);
                     <img 
                       :src="url"
                       class="radius-base object-fit-cover bg-forth" 
+                      tabindex="0"
                       :style="{ width, height }"
                       @click="previewShow=true"
                     />
@@ -104,6 +105,7 @@ const previewShow = ref(false);
                     :src="url"
                     class="radius-base object-fit-cover bg-forth" 
                     :style="{ width, height }"
+                    tabindex="0"
                     @click="router.push({name: 'ArtifactSubPartModelDetail', query: { 
                       ...route.query,
                       model: item.model,

src/views/ArtifactSubPartModelDetailView.vue

@@ -24,9 +24,6 @@ const newsData = useSimpleDataLoader(async () => {
     model: getArtifactModelDetail(data.id)
   };
 });
-const subPartModels = computed(() => {
-  return newsData.content.value?.detail.associationMeList.filter((p) => p.modelId === UnmoveableContent.SubPartModelId);
-});
 const previewShow = ref(false);
 </script>
 
@@ -56,7 +53,8 @@ const previewShow = ref(false);
                   <template #item="{ url, item, width, height }">
                     <img 
                       :src="url"
-                      class="radius-base object-fit-cover bg-forth" 
+                      class="radius-base object-fit-cover bg-forth"
+                      tabindex="0"
                       :style="{ width, height }"
                       @click="previewShow=true"
                     />

src/views/ArtifactSubPartView.vue

@@ -40,6 +40,7 @@ onMounted(() => {
                 v-for="(item, key) in newsData.content.value" 
                 :key="key"
                 :item="item"
+                tabindex="0"
                 @click="router.push({ name: 'ArtifactSubPartModelDetail', query: { 
                   ...route.query,
                   model: item.model 

src/views/ArtifactView.vue

@@ -8,7 +8,7 @@ import UnmoveableContent from '@/api/inherit/UnmoveableContent';
 import Title from '@/assets/images/Artifact/TitleList.png';
 import PageLeftTitleRightContent from '@/components/parts/PageLeftTitleRightContent.vue';
 import SimplePageListContentLoader from '@/components/SimplePageListContentLoader.vue';
-import ScrollLeftRightButton from '@/components/small/ScrollLeftRightButton.vue';
+import ScrollLeftRightButton from '@/components/small/ScrollLeftRightButton2.vue';
 import VerticalImageItem from '@/components/small/VerticalImageItem.vue';
 
 const router = useRouter();
@@ -29,14 +29,15 @@ onMounted(() => {
     :box="false"
   >
     <template #content>
-      <ScrollLeftRightButton :scrollRect="scrollRect" class="d-flex flex-row align-center w-100 position-relative">
-        <ScrollRect ref="scrollRect" scroll="horizontal" style="width: 80%" @scrollToEnd="newsData.next()">
+      <ScrollLeftRightButton :scrollRect="scrollRect" class="align-center w-95 position-relative">
+        <ScrollRect ref="scrollRect" scroll="horizontal" @scrollToEnd="newsData.next()">
           <SimplePageListContentLoader :loader="newsData">
             <div class="d-flex flex-row align-center p-45">
               <VerticalImageItem
                 v-for="(item, key) in newsData.list.value" 
                 :key="key"
                 :item="item"
+                tabindex="0"
                 @click="router.push({ name: 'ArtifactDetail', query: { id: item.id } })"
               />
             </div>

src/views/BookView.vue

@@ -27,6 +27,7 @@ const newsData = useSimpleDataLoader(async () => {
             <div 
               class="d-flex flex-row align-center justify-between p-3 pt-5 pb-5 size-ss color-text-second border-bottom-third cursor-pointer" 
               v-for="(item, key) in newsData.content.value" 
+              tabindex="0"
               :key="key"
               @click="router.push({ name: 'BookDetail', query: { id: item.id } })"
             >

src/views/IntrodView.vue

@@ -3,7 +3,7 @@ import HuliApi from '@/api/huli/HuliApi';
 import Title from '@/assets/images/Index/Title.png';
 import PageLeftTitleRightContent from '@/components/parts/PageLeftTitleRightContent.vue';
 import SimplePageContentLoader from '@/components/SimplePageContentLoader.vue';
-import ScrollLeftRightButton from '@/components/small/ScrollLeftRightButton.vue';
+import ScrollLeftRightButton from '@/components/small/ScrollLeftRightButton2.vue';
 import VerticalImageItem from '@/components/small/VerticalImageItem.vue';
 import { useSimpleDataLoader } from '@/composeable/SimpleDataLoader';
 import { ScrollRect, type ScrollRectInstance } from '@imengyu/vue-scroll-rect';
@@ -12,7 +12,8 @@ import { useRouter } from 'vue-router';
 
 const router = useRouter();
 const newsData = useSimpleDataLoader(async () => {
-  return (await HuliApi.getIntrodList(1, 30));
+  const res = (await HuliApi.getIntrodList(1, 30));
+  return res;
 });
 
 const scrollRect = ref<ScrollRectInstance>();
@@ -26,18 +27,21 @@ const scrollRect = ref<ScrollRectInstance>();
     titleAfterText="湖里·非遗项目"
   >
     <template #content>
-      <ScrollLeftRightButton :scrollRect="scrollRect" class="d-flex flex-row align-center w-100 position-relative">
-        <ScrollRect ref="scrollRect" scroll="horizontal" style="width: 80%">
+      <ScrollLeftRightButton :scrollRect="scrollRect" class="align-center w-90 position-relative">
+        <ScrollRect ref="scrollRect" scroll="horizontal">
           <SimplePageContentLoader :loader="newsData">
             <div class="d-flex flex-row align-center p-45">
               <VerticalImageItem
                 v-for="(item, key) in newsData.content.value" 
                 :key="key"
+                :item="item"
+                tabindex="0"
                 @click="router.push({ name: 'IntrodDetail', query: { id: item.id } })"
               />
             </div>
           </SimplePageContentLoader>
         </ScrollRect>
+        <div class="w-20" />
       </ScrollLeftRightButton>
     </template>
   </PageLeftTitleRightContent>

src/views/LawsView.vue

@@ -55,6 +55,7 @@ const newsData = useSimpleDataLoader(async (params) => {
               class="d-flex flex-row align-center size-ss color-text-second p-3 border-bottom-forth cursor-pointer" 
               v-for="(item, key) in newsData.content.value" 
               :key="key"
+              tabindex="0"
               @click="router.push({ name: 'LawsDetail', query: { id: item.id } })"
             >
               <span>{{ item.title }}</span>

src/views/MenuView.vue

@@ -13,7 +13,7 @@ const navs = useMenuData();
         v-for="nav in navs"
         :key="nav.name"
         class="grid-item"
-        tabindex="1"
+        tabindex="0"
         @click="nav.onClick"
       >
         <img :src="nav.icon" :alt="nav.name">
@@ -39,6 +39,11 @@ const navs = useMenuData();
   cursor: pointer;
   height: 22vh;
 
+  
+  &:focus {
+    outline: 2px solid #444;
+  }
+
   img {
     width: 100px;
     height: 100px;

src/views/VideoView.vue

@@ -6,6 +6,7 @@ import HuliApi from '@/api/huli/HuliApi';
 import PageLeftTitleRightContent from '@/components/parts/PageLeftTitleRightContent.vue';
 import SimplePopup from '@/components/SimplePopup.vue';
 import HoriontalLargeList from '@/components/small/HoriontalLargeList.vue';
+import SimplePageContentLoader from '@/components/SimplePageContentLoader.vue';
 
 const newsData = useSimpleDataLoader(async (params) => {
   return (await HuliApi.getVideoList(1, 30)).map(p => {
@@ -30,7 +31,9 @@ function goDetail(item: GetContentListItem, index: number) {
 <template>
   <PageLeftTitleRightContent title-after-text="科普·系列片" :box="false">
     <template #content>
-      <HoriontalLargeList :list="newsData.content.value!" @item-click="goDetail" />
+      <SimplePageContentLoader :loader="newsData">
+        <HoriontalLargeList :list="newsData.content.value!" @item-click="goDetail" />
+      </SimplePageContentLoader>
     </template>
   </PageLeftTitleRightContent>
   <SimplePopup v-model:show="showDialog">
@@ -39,7 +42,7 @@ function goDetail(item: GetContentListItem, index: number) {
         <img class="main-image-button" src="@/assets/images/IconBack.png" @click="showDialog = false"></img>
         <h2 class="mb-0 ml-3">{{ currentItem?.title }}</h2>
       </div>
-      <video class="w-100" :src="(currentItem?.video as string)" controls></video>
+      <video v-if="showDialog" class="w-100" :src="(currentItem?.video as string)" controls autoplay></video>
     </div>
   </SimplePopup>
 </template>

src/views/VolunteerView.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import PageLeftTitleRightContent from '@/components/parts/PageLeftTitleRightContent.vue';
+import { ScrollRect } from '@imengyu/vue-scroll-rect';
+
+</script>
+
+<template>
+  <PageLeftTitleRightContent title-after-text="志愿者">
+    <template #content>
+      <ScrollRect scroll="vertical">
+        <div class="p-5 d-flex flex-col">
+          <h1>敬请期待</h1>
+        </div>
+      </ScrollRect>
+    </template>
+  </PageLeftTitleRightContent>
+</template>
+
+<style lang="scss" scoped>
+</style>