feat: --

.gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

README.md

@@ -0,0 +1,33 @@
+# en-shoubo-pc
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+pnpm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+pnpm dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+pnpm build
+```

auto-imports.d.ts

@@ -0,0 +1,9 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+
+}

components.d.ts

@@ -0,0 +1,19 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    Accessibility: typeof import('./src/components/Accessibility/index.vue')['default']
+    Layout: typeof import('./src/components/Layout/index.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    SvgIcon: typeof import('./src/components/SvgIcon/index.vue')['default']
+    VanSwipe: typeof import('vant/es')['Swipe']
+    VanSwipeItem: typeof import('vant/es')['SwipeItem']
+    VanSwitch: typeof import('vant/es')['Switch']
+  }
+}

env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "en-shoubo-pc",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build --force"
+  },
+  "dependencies": {
+    "pinia": "^2.1.7",
+    "vant": "^4.9.0",
+    "vue": "^3.4.21",
+    "vue-router": "^4.3.0"
+  },
+  "devDependencies": {
+    "@tsconfig/node20": "^20.1.4",
+    "@types/node": "^20.12.5",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "@vue/tsconfig": "^0.5.1",
+    "install": "^0.13.0",
+    "less": "^4.2.0",
+    "npm-run-all2": "^6.1.2",
+    "typescript": "~5.4.0",
+    "unplugin-vue-components": "^0.27.0",
+    "vite": "^5.2.8",
+    "vite-plugin-svg-icons": "^2.0.1",
+    "vue-tsc": "^2.0.11"
+  }
+}

src/App.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { onBeforeMount } from "vue";
+import { RouterView } from "vue-router";
+
+onBeforeMount(() => {
+  // 移动端和pc端的切换
+  if (
+    window.navigator.userAgent.match(
+      /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
+    )
+  ) {
+    // 移动端
+    if (window.location.href.indexOf("en.capitalmuseum.org.cn") > -1) {
+      window.location.href =
+        window.location.origin + "/mobile/index.html#/Layout/Home";
+      setTimeout(() => {
+        location.reload();
+      }, 200);
+    }
+  }
+});
+</script>
+
+<template>
+  <RouterView />
+</template>
+
+<style lang="less">
+body.aria-active {
+  margin-top: 105px;
+}
+
+.van-swipe {
+  cursor: default !important;
+}
+</style>

src/assets/css/ariaGlobalStyle.less

@@ -0,0 +1,194 @@
+@import './common.less';
+
+code {
+  display: none;
+}
+
+.aria-active {
+  .aria-theme-default {
+    &:focus {
+      outline: 2px solid red !important;
+      outline-offset: -2px;
+      &.aria-outline-out {
+        outline-offset: 0;
+      }
+    }
+    * {
+      &:focus {
+        outline: 2px solid red !important;
+        outline-offset: -2px;
+        &.aria-outline-out {
+        outline-offset: 0;
+      }
+      }
+    }
+  }
+
+  .aria-theme-white {
+    background: white !important;
+    color: black !important;
+    &:focus {
+      outline: 2px solid black;
+      outline-offset: -2px;
+      &.aria-outline-out {
+        outline-offset: 0;
+      }
+    }
+    *:not(.aria-theme-independent, .el-carousel, .el-carousel *, img) {
+      background: white !important;
+      color: black !important;
+      &:focus {
+        outline: 2px solid black;
+        outline-offset: -2px;
+        &.aria-outline-out {
+        outline-offset: 0;
+      }
+      }
+      &::placeholder {
+        color: black !important;
+      }
+    }
+    a:not(.aria-theme-independent, .el-carousel, .el-carousel *, img) {
+      color: blue !important;
+    }
+    &.aria-inverse-theme {
+      background: black !important;
+      color: white !important;
+    }
+    .aria-inverse-theme {
+      background: black !important;
+      color: white !important;
+    }
+  }
+
+  .aria-theme-blue {
+    background: blue !important;
+    color: yellow !important;
+    &:focus {
+      outline: 2px solid yellow;
+      outline-offset: -2px;
+      &.aria-outline-out {
+        outline-offset: 0;
+      }
+    }
+    *:not(.aria-theme-independent, .el-carousel, .el-carousel *, img) {
+      background: blue !important;
+      color: yellow !important;
+      &:focus {
+      outline: 2px solid yellow;
+      outline-offset: -2px;
+      &.aria-outline-out {
+        outline-offset: 0;
+      }
+      }
+      &::placeholder {
+        color: yellow !important;
+      }
+    }
+    a:not(.aria-theme-independent, .el-carousel, .el-carousel *, img) {
+      color: white !important;
+    }
+    &.aria-inverse-theme {
+      background: yellow !important;
+      color: blue !important;
+    }
+    .aria-inverse-theme {
+      background: yellow !important;
+      color: blue !important;
+    }
+  }
+
+  .aria-theme-yellow {
+    background: yellow !important;
+    color: black !important;
+    &:focus {
+      outline: 2px solid black;
+      outline-offset: -2px;
+      &.aria-outline-out {
+        outline-offset: 0;
+      }
+    }
+    *:not(.aria-theme-independent, .el-carousel, .el-carousel *, img) {
+      background: yellow !important;
+      color: black !important;
+      &:focus {
+      outline: 2px solid black;
+      outline-offset: -2px;
+      &.aria-outline-out {
+        outline-offset: 0;
+      }
+      }
+      &::placeholder {
+        color: black !important;
+      }
+    }
+    a:not(.aria-theme-independent, .el-carousel, .el-carousel *, img) {
+      color: blue !important;
+    }
+    &.aria-inverse-theme {
+      background: black !important;
+      color: yellow !important;
+    }
+    .aria-inverse-theme {
+      background: black !important;
+      color: yellow !important;
+    }
+  }
+
+  .aria-theme-black {
+    background: black !important;
+    color: yellow !important;
+    &:focus {
+      outline: 2px solid yellow;
+      outline-offset: -2px;
+      &.aria-outline-out {
+        outline-offset: 0;
+      }
+    }
+    *:not(.aria-theme-independent, .el-carousel, .el-carousel *, img) {
+      background: black !important;
+      color: yellow !important;
+      &:focus {
+        outline: 2px solid yellow;
+        outline-offset: -2px;
+        &.aria-outline-out {
+        outline-offset: 0;
+      }
+      }
+      &::placeholder {
+        color: yellow !important;
+      }
+    }
+    a:not(.aria-theme-independent, .el-carousel, .el-carousel *, img) {
+      color: white !important;
+    }
+    &.aria-inverse-theme {
+      background: yellow !important;
+      color: black !important;
+    }
+    .aria-inverse-theme {
+      background: yellow !important;
+      color: black !important;
+    }
+  }
+}
+
+body.aria-active {
+  margin-top: @accessibility-menu-height;
+}
+
+body.aria-active.aria-magnifying {
+  margin-bottom: @magnify-area-height;
+}
+
+html.aria-active {
+  scroll-padding-top: @accessibility-menu-height;
+}
+
+// 对于有data-aria-xxx-area attribute的元素，鼠标点击（或者点击其不可focus的子元素）时不应该导致focus到这个元素上，换言之，这种元素只应该能通过tab键focus。
+*[data-aria-navigation-area], *[data-aria-viewport-area], *[data-aria-interaction-area] {
+  pointer-events: none;
+  >* {
+    pointer-events: initial;
+  }
+}

src/assets/css/base.css

@@ -0,0 +1,229 @@
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+    box-sizing: border-box;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+    display: block;
+}
+
+body {
+    line-height: 1;
+    background-color: #f1f1f1;
+    font-family: Arial;
+}
+
+ol,
+ul {
+    list-style: none;
+}
+
+blockquote,
+q {
+    quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+    content: '';
+    content: none;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+a {
+    color: #000;
+    text-decoration: none;
+}
+
+a:hover {
+    color: #000;
+    text-decoration: none;
+}
+
+/* element 输入框样式 */
+.el-input {
+    height: 30px;
+}
+
+.el-input__inner {
+    height: 30px;
+    border-radius: 15px;
+    line-height: 30px;
+}
+
+.el-input.is-active .el-input__inner,
+.el-input__inner:focus {
+    border-color: #ca000a;
+}
+
+/* 轮播图样式 */
+.el-carousel--horizontal {
+    height: 100%;
+}
+
+.el-carousel__container {
+    height: 100%;
+}
+
+.el-carousel__arrow {
+    display: none !important;
+}
+
+.el-carousel__button {
+    height: 4px;
+    background-color: #918784;
+    opacity: 1;
+}
+
+.el-carousel__indicator.is-active button {
+    background-color: #c7000b;
+}
+
+.el-carousel__indicators--horizontal {
+    bottom: 80px;
+}
+
+.el-select .el-input.is-focus .el-input__inner {
+    border-color: #c7000b;
+}
+
+.el-select .el-input__inner:focus {
+    border-color: #c7000b;
+}
+
+.el-select-dropdown__item.selected {
+    color: #c7000b;
+}
+
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover {
+    background-color: #c7000b;
+    color: #fff;
+}
+
+
+/* 置灰 */
+/* * {
+    -webkit-filter: grayscale(100%);
+    -moz-filter: grayscale(100%);
+    -ms-filter: grayscale(100%);
+    -o-filter: grayscale(100%);
+    filter: grayscale(100%);
+    filter: gray;
+} */
+
+.limit-line {
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    word-break: break-all;
+    word-wrap: break-word;
+}
+
+.line-2 {
+    -webkit-line-clamp: 2;
+}

src/assets/css/common.less

@@ -0,0 +1,2 @@
+@accessibility-menu-height: 105px;
+@magnify-area-height: 219px;