Domovská stránka Prehľadávať Pomoc
Registrovať Prihlásiť sa
dailc
/
magazine
1
0
Fork 0
Súbory Issues 0 Pull requesty 0 Wiki
Prechádzať zdrojové kódy

h5支持

Lechan Dai 1 rok pred
rodič
d906215687
commit
3f383852f8
100 zmenil súbory, kde vykonal 2704 pridanie a 83 odobranie
Rozdelené zobrazenie Ukázať štatistiku rozdielnych dát
  1. 1 0
      .env.h5
  2. 0 14
      index.html
  3. 4 1
      package.json
  4. 16 0
      postcss.config.js
  5. 0 10
      src/App.vue
  6. 0 0
      src/common/locales/zh-CN.js
  7. 14 0
      src/common/locales/zh-TW.js
  8. 23 46
      src/components.d.ts
  9. 36 0
      src/components_pc.d.ts
  10. 11 0
      src/h5/App.vue
  11. 0 0
      src/h5/assets/css/fonts/element-icons.ttf
  12. 0 0
      src/h5/assets/css/fonts/element-icons.woff
  13. 0 0
      src/h5/assets/css/index.css
  14. 0 0
      src/h5/assets/not-found.svg
  15. 0 0
      src/h5/assets/vite-logo.svg
  16. 0 0
      src/h5/assets/vue-logo.svg
  17. 203 0
      src/h5/auto-imports.d.ts
  18. 36 0
      src/h5/components.d.ts
  19. 0 0
      src/h5/components/Feature.vue
  20. 0 0
      src/h5/components/Features.vue
  21. 0 0
      src/h5/components/Hero.vue
  22. 0 0
      src/h5/components/Navbar.vue
  23. 0 0
      src/h5/components/layout-basic/layout-basic.vue
  24. 0 0
      src/h5/components/layout-user/layout-user-header.vue
  25. 0 0
      src/h5/components/layout-user/layout-user-menu.vue
  26. 0 0
      src/h5/components/layout-user/layout-user.vue
  27. 0 0
      src/h5/components/ui-devider/ui-devider.vue
  28. 0 0
      src/h5/components/ui-input/ui-input.vue
  29. 0 0
      src/h5/components/ui-main-article/ui-main-article.vue
  30. 12 2
      src/components/ui-nav-bar/ui-nav-bar.vue
  31. 0 0
      src/h5/components/ui-order-table/ui-order-table.vue
  32. 0 0
      src/h5/components/ui-portal/ui-portal.vue
  33. 0 0
      src/h5/components/ui-shadow-box/ui-shadow-box.vue
  34. 0 0
      src/h5/components/ui-small-article/ui-small-article.vue
  35. 0 0
      src/h5/components/ui-swiper/ui-swiper.vue
  36. 0 0
      src/h5/components/ui-title-devider/ui-title-devider.vue
  37. 0 0
      src/h5/components/ui-vip-article/ui-vip-article.vue
  38. 0 0
      src/h5/components/ui-vip-preset/ui-vip-preset.vue
  39. 22 0
      src/h5/index.html
  40. 5 5
      src/main.js
  41. 0 0
      src/h5/pages/aboutus/aboutus.vue
  42. 356 0
      src/h5/pages/article-detail/article-detail.vue
  43. 0 0
      src/h5/pages/auth/change-password.vue
  44. 0 0
      src/h5/pages/auth/login.vue
  45. 87 0
      src/h5/pages/auth/profile-complete.vue
  46. 0 0
      src/h5/pages/home/_components/home-new.vue
  47. 0 0
      src/h5/pages/home/_components/home-tags.vue
  48. 2 2
      src/pages/home/home.vue
  49. 0 0
      src/h5/pages/product/order-detail.vue
  50. 0 0
      src/h5/pages/product/product-detail.vue
  51. 0 0
      src/h5/pages/publish/publish.vue
  52. 142 0
      src/h5/pages/realtime-news/realtime-news.vue
  53. 142 0
      src/h5/pages/recommend/recommend.vue
  54. 0 0
      src/h5/pages/search/search.vue
  55. 143 0
      src/h5/pages/specific-article/specific-article.vue
  56. 0 0
      src/h5/pages/user/_components/user-account-setting-info-item.vue
  57. 71 0
      src/h5/pages/user/user-account-setting.vue
  58. 0 0
      src/h5/pages/user/user-collection.vue
  59. 0 0
      src/h5/pages/user/user-comment.vue
  60. 0 0
      src/h5/pages/user/user-history.vue
  61. 0 0
      src/h5/pages/user/user-like.vue
  62. 0 0
      src/h5/pages/user/user-order.vue
  63. 0 0
      src/h5/pages/user/user-personal-center.vue
  64. 0 0
      src/h5/pages/user/user-subscription.vue
  65. 34 0
      src/h5/pages/vip/vip.vue
  66. 91 0
      src/h5/router/index.ts
  67. 0 0
      src/h5/shims-tsx.d.ts
  68. 0 0
      src/h5/shims-vue.d.ts
  69. 0 3
      src/locales/zh-TW.js
  70. 11 0
      src/pc/App.vue
  71. BIN
      src/pc/assets/css/fonts/element-icons.ttf
  72. BIN
      src/pc/assets/css/fonts/element-icons.woff
  73. 1 0
      src/pc/assets/css/index.css
  74. 1 0
      src/pc/assets/not-found.svg
  75. 15 0
      src/pc/assets/vite-logo.svg
  76. 2 0
      src/pc/assets/vue-logo.svg
  77. 203 0
      src/pc/auto-imports.d.ts
  78. 36 0
      src/pc/components.d.ts
  79. 31 0
      src/pc/components/Feature.vue
  80. 54 0
      src/pc/components/Features.vue
  81. 25 0
      src/pc/components/Hero.vue
  82. 69 0
      src/pc/components/Navbar.vue
  83. 54 0
      src/pc/components/layout-basic/layout-basic.vue
  84. 37 0
      src/pc/components/layout-user/layout-user-header.vue
  85. 108 0
      src/pc/components/layout-user/layout-user-menu.vue
  86. 30 0
      src/pc/components/layout-user/layout-user.vue
  87. 15 0
      src/pc/components/ui-devider/ui-devider.vue
  88. 20 0
      src/pc/components/ui-input/ui-input.vue
  89. 48 0
      src/pc/components/ui-main-article/ui-main-article.vue
  90. 163 0
      src/pc/components/ui-nav-bar/ui-nav-bar.vue
  91. 71 0
      src/pc/components/ui-order-table/ui-order-table.vue
  92. 24 0
      src/pc/components/ui-portal/ui-portal.vue
  93. 12 0
      src/pc/components/ui-shadow-box/ui-shadow-box.vue
  94. 29 0
      src/pc/components/ui-small-article/ui-small-article.vue
  95. 99 0
      src/pc/components/ui-swiper/ui-swiper.vue
  96. 18 0
      src/pc/components/ui-title-devider/ui-title-devider.vue
  97. 22 0
      src/pc/components/ui-vip-article/ui-vip-article.vue
  98. 38 0
      src/pc/components/ui-vip-preset/ui-vip-preset.vue
  99. 17 0
      src/pc/index.html
  100. 0 0
      src/pc/main.js

+ 1 - 0
.env.h5
Zobraziť súbor 

@@ -0,0 +1 @@
 
+HELLO=HELLO

+ 0 - 14
index.html
Zobraziť súbor 

@@ -1,14 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-  <head>
 
-      <meta charset="utf-8">
 
-      <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
-      <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
-      <link rel="icon" href="/favicon.ico">
 
-      <title>Example</title>
 
-  </head>
 
-  <body >
 
-    <div id="app"></div>
 
-    <script type="module" src="/src/main.js"></script>
 
-  </body>
 
-</html>

+ 4 - 1
package.json
Zobraziť súbor 

@@ -2,7 +2,8 @@
 
   "private": true,
 
   "scripts": {
 
     "postinstall": "husky install",
 
-    "dev": "vite",
 
+    "dev:pc": "vite --mode pc",
 
+    "dev:h5": "vite --mode h5",
 
     "build": "vite build",
 
     "lint": "eslint \"**/*.{vue,ts,js}\"",
 
     "lint:fix": "eslint \"**/*.{vue,ts,js}\" --fix"
 
@@ -24,9 +25,11 @@
 
   "devDependencies": {
 
     "@antfu/eslint-config": "^0.25.2",
 
     "@iconify/json": "^2.1.83",
 
+    "@types/node": "^18.11.0",
 
     "@vitejs/plugin-vue2": "^1.1.2",
 
     "eslint": "^8.20.0",
 
     "husky": "^8.0.1",
 
+    "postcss-pxtorem": "^6.0.0",
 
     "sass": "^1.55.0",
 
     "typescript": "^4.7.4",
 
     "unplugin-auto-import": "^0.10.1",

+ 16 - 0
postcss.config.js
Zobraziť súbor 

@@ -0,0 +1,16 @@
 
+var pxtorem = require("postcss-pxtorem");
 
+
 
+module.exports = {
 
+  plugins: {
 
+    "postcss-pxtorem": pxtorem({
 
+      rootValue: 16,
 
+      unitPrecision: 5,
 
+      propList: ["*"],
 
+      selectorBlackList: [],
 
+      replace: true,
 
+      mediaQuery: false,
 
+      minPixelValue: 0,
 
+      exclude: /node_modules/i,
 
+    }),
 
+  },
 
+};

+ 0 - 10
src/App.vue
Zobraziť súbor 

@@ -1,10 +0,0 @@
 
-<template>
 
-  <div id="app" >
 
-    <RouterView />
 
-  </div>
 
-</template>
 
-<style>
 
-body {
 
-  @apply bg-[#F7F7F7] ;
 
-}
 
-</style>

src/locales/zh-CN.js → src/common/locales/zh-CN.js
Zobraziť súbor


+ 14 - 0
src/common/locales/zh-TW.js
Zobraziť súbor 

@@ -0,0 +1,14 @@
 
+export default {
 
+  首页: "首頁",
 
+  推荐: "推薦",
 
+  分类浏览: "分類瀏覽",
 
+  实时新闻: "實時新聞",
 
+  VIP专区: "VIP專區",
 
+  关于我们: "關於我們",
 
+  投稿: "投稿",
 
+  搜索: "搜索",
 
+
 
+  登录注册: "登錄/註冊",
 
+  登录: "註冊",
 
+  注册: "註冊",
 
+};

+ 23 - 46
src/components.d.ts
Zobraziť súbor 

@@ -7,53 +7,30 @@ export {}
 
 
 declare module '@vue/runtime-core' {
 
   export interface GlobalComponents {
 
-    ButtonPrimary: typeof import('./components/shared/ButtonPrimary.vue')['default']
 
-    ButtonSecondary: typeof import('./components/shared/ButtonSecondary.vue')['default']
 
-    ElButton: typeof import('element-ui/lib/button')['default']
 
-    ElDialog: typeof import('element-ui/lib/dialog')['default']
 
-    ElInput: typeof import('element-ui/lib/input')['default']
 
-    ElInputNumber: typeof import('element-ui/lib/input-number')['default']
 
-    ElRadio: typeof import('element-ui/lib/radio')['default']
 
-    ElRadioGroup: typeof import('element-ui/lib/radio-group')['default']
 
-    ElSwitch: typeof import('element-ui/lib/switch')['default']
 
-    ElTable: typeof import('element-ui/lib/table')['default']
 
-    ElTableColumn: typeof import('element-ui/lib/table-column')['default']
 
-    ElTabPane: typeof import('element-ui/lib/tab-pane')['default']
 
-    ElTabs: typeof import('element-ui/lib/tabs')['default']
 
-    ElTextarea: typeof import('element-ui/lib/textarea')['default']
 
-    ElTextArea: typeof import('element-ui/lib/text-area')['default']
 
-    Feature: typeof import('./components/Feature.vue')['default']
 
-    Features: typeof import('./components/Features.vue')['default']
 
-    Heading1: typeof import('./components/shared/Heading1.vue')['default']
 
-    Heading2: typeof import('./components/shared/Heading2.vue')['default']
 
-    Hero: typeof import('./components/Hero.vue')['default']
 
-    Home: typeof import('./pages/home/home.vue')['default']
 
-    HomeNew: typeof import('./pages/home/_components/home-new.vue')['default']
 
-    HomeTags: typeof import('./pages/home/_components/home-tags.vue')['default']
 
-    LayoutBasic: typeof import('./components/layout-basic/layout-basic.vue')['default']
 
-    LayoutUser: typeof import('./components/layout-user/layout-user.vue')['default']
 
-    LayoutUserHeader: typeof import('./components/layout-user/layout-user-header.vue')['default']
 
-    LayoutUserMenu: typeof import('./components/layout-user/layout-user-menu.vue')['default']
 
-    MdiAlien: typeof import('~icons/mdi/alien')['default']
 
-    MdiArrowRight: typeof import('~icons/mdi/arrow-right')['default']
 
-    MdiGithub: typeof import('~icons/mdi/github')['default']
 
-    MdiMoonWaningCrescent: typeof import('~icons/mdi/moon-waning-crescent')['default']
 
-    MdiWhiteBalanceSunny: typeof import('~icons/mdi/white-balance-sunny')['default']
 
-    Navbar: typeof import('./components/Navbar.vue')['default']
 
+    Feature: typeof import('./pc/components/Feature.vue')['default']
 
+    Features: typeof import('./pc/components/Features.vue')['default']
 
+    Hero: typeof import('./pc/components/Hero.vue')['default']
 
+    HomeNew: typeof import('./pc/pages/home/_components/home-new.vue')['default']
 
+    HomeTags: typeof import('./pc/pages/home/_components/home-tags.vue')['default']
 
+    LayoutBasic: typeof import('./pc/components/layout-basic/layout-basic.vue')['default']
 
+    LayoutUser: typeof import('./pc/components/layout-user/layout-user.vue')['default']
 
+    LayoutUserHeader: typeof import('./pc/components/layout-user/layout-user-header.vue')['default']
 
+    LayoutUserMenu: typeof import('./pc/components/layout-user/layout-user-menu.vue')['default']
 
+    Navbar: typeof import('./pc/components/Navbar.vue')['default']
 
     RouterLink: typeof import('vue-router')['RouterLink']
 
     RouterView: typeof import('vue-router')['RouterView']
 
-    UiDevider: typeof import('./components/ui-devider/ui-devider.vue')['default']
 
-    UiInput: typeof import('./components/ui-input/ui-input.vue')['default']
 
-    UiMainArticle: typeof import('./components/ui-main-article/ui-main-article.vue')['default']
 
-    UiNavBar: typeof import('./components/ui-nav-bar/ui-nav-bar.vue')['default']
 
-    UiOrderTable: typeof import('./components/ui-order-table/ui-order-table.vue')['default']
 
-    UiPortal: typeof import('./components/ui-portal/ui-portal.vue')['default']
 
-    UiShadowBox: typeof import('./components/ui-shadow-box/ui-shadow-box.vue')['default']
 
-    UiSmallArticle: typeof import('./components/ui-small-article/ui-small-article.vue')['default']
 
-    UiSwiper: typeof import('./components/ui-swiper/ui-swiper.vue')['default']
 
-    UiTitleDevider: typeof import('./components/ui-title-devider/ui-title-devider.vue')['default']
 
-    UiVipArticle: typeof import('./components/ui-vip-article/ui-vip-article.vue')['default']
 
-    UiVipPreset: typeof import('./components/ui-vip-preset/ui-vip-preset.vue')['default']
 
-    UserAccountSettingInfoItem: typeof import('./pages/user/_components/user-account-setting-info-item.vue')['default']
 
+    UiDevider: typeof import('./pc/components/ui-devider/ui-devider.vue')['default']
 
+    UiInput: typeof import('./pc/components/ui-input/ui-input.vue')['default']
 
+    UiMainArticle: typeof import('./pc/components/ui-main-article/ui-main-article.vue')['default']
 
+    UiNavBar: typeof import('./pc/components/ui-nav-bar/ui-nav-bar.vue')['default']
 
+    UiOrderTable: typeof import('./pc/components/ui-order-table/ui-order-table.vue')['default']
 
+    UiPortal: typeof import('./pc/components/ui-portal/ui-portal.vue')['default']
 
+    UiShadowBox: typeof import('./pc/components/ui-shadow-box/ui-shadow-box.vue')['default']
 
+    UiSmallArticle: typeof import('./pc/components/ui-small-article/ui-small-article.vue')['default']
 
+    UiSwiper: typeof import('./pc/components/ui-swiper/ui-swiper.vue')['default']
 
+    UiTitleDevider: typeof import('./pc/components/ui-title-devider/ui-title-devider.vue')['default']
 
+    UiVipArticle: typeof import('./pc/components/ui-vip-article/ui-vip-article.vue')['default']
 
+    UiVipPreset: typeof import('./pc/components/ui-vip-preset/ui-vip-preset.vue')['default']
 
+    UserAccountSettingInfoItem: typeof import('./pc/pages/user/_components/user-account-setting-info-item.vue')['default']
 
   }
 
 }

+ 36 - 0
src/components_pc.d.ts
Zobraziť súbor 

@@ -0,0 +1,36 @@
 
+// generated by unplugin-vue-components
 
+// We suggest you to commit this file into source control
 
+// Read more: https://github.com/vuejs/core/pull/3399
 
+import '@vue/runtime-core'
 
+
 
+export {}
 
+
 
+declare module '@vue/runtime-core' {
 
+  export interface GlobalComponents {
 
+    Feature: typeof import('./pc/components/Feature.vue')['default']
 
+    Features: typeof import('./pc/components/Features.vue')['default']
 
+    Hero: typeof import('./pc/components/Hero.vue')['default']
 
+    HomeNew: typeof import('./pc/pages/home/_components/home-new.vue')['default']
 
+    HomeTags: typeof import('./pc/pages/home/_components/home-tags.vue')['default']
 
+    LayoutBasic: typeof import('./pc/components/layout-basic/layout-basic.vue')['default']
 
+    LayoutUser: typeof import('./pc/components/layout-user/layout-user.vue')['default']
 
+    LayoutUserHeader: typeof import('./pc/components/layout-user/layout-user-header.vue')['default']
 
+    LayoutUserMenu: typeof import('./pc/components/layout-user/layout-user-menu.vue')['default']
 
+    Navbar: typeof import('./pc/components/Navbar.vue')['default']
 
+    RouterLink: typeof import('vue-router')['RouterLink']
 
+    RouterView: typeof import('vue-router')['RouterView']
 
+    UiDevider: typeof import('./pc/components/ui-devider/ui-devider.vue')['default']
 
+    UiInput: typeof import('./pc/components/ui-input/ui-input.vue')['default']
 
+    UiMainArticle: typeof import('./pc/components/ui-main-article/ui-main-article.vue')['default']
 
+    UiNavBar: typeof import('./pc/components/ui-nav-bar/ui-nav-bar.vue')['default']
 
+    UiOrderTable: typeof import('./pc/components/ui-order-table/ui-order-table.vue')['default']
 
+    UiPortal: typeof import('./pc/components/ui-portal/ui-portal.vue')['default']
 
+    UiShadowBox: typeof import('./pc/components/ui-shadow-box/ui-shadow-box.vue')['default']
 
+    UiSmallArticle: typeof import('./pc/components/ui-small-article/ui-small-article.vue')['default']
 
+    UiSwiper: typeof import('./pc/components/ui-swiper/ui-swiper.vue')['default']
 
+    UiTitleDevider: typeof import('./pc/components/ui-title-devider/ui-title-devider.vue')['default']
 
+    UiVipArticle: typeof import('./pc/components/ui-vip-article/ui-vip-article.vue')['default']
 
+    UiVipPreset: typeof import('./pc/components/ui-vip-preset/ui-vip-preset.vue')['default']
 
+    UserAccountSettingInfoItem: typeof import('./pc/pages/user/_components/user-account-setting-info-item.vue')['default']
 
+  }
 
+}

+ 11 - 0
src/h5/App.vue
Zobraziť súbor 

@@ -0,0 +1,11 @@
 
+<template>
 
+  <div id="app">
 
+    <div class="w-375rem bg-red-400">1w</div>
 
+    <RouterView />
 
+  </div>
 
+</template>
 
+<style>
 
+body {
 
+  @apply bg-[#F7F7F7];
 
+}
 
+</style>

src/assets/css/fonts/element-icons.ttf → src/h5/assets/css/fonts/element-icons.ttf
Zobraziť súbor


src/assets/css/fonts/element-icons.woff → src/h5/assets/css/fonts/element-icons.woff
Zobraziť súbor


src/assets/css/index.css → src/h5/assets/css/index.css
Zobraziť súbor


src/assets/not-found.svg → src/h5/assets/not-found.svg
Zobraziť súbor


src/assets/vite-logo.svg → src/h5/assets/vite-logo.svg
Zobraziť súbor


src/assets/vue-logo.svg → src/h5/assets/vue-logo.svg
Zobraziť súbor


+ 203 - 0
src/h5/auto-imports.d.ts
Zobraziť súbor 

@@ -0,0 +1,203 @@
 
+// Generated by 'unplugin-auto-import'
 
+export {}
 
+declare global {
 
+  const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
 
+  const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
 
+  const computedAsync: typeof import('@vueuse/core')['computedAsync']
 
+  const computedEager: typeof import('@vueuse/core')['computedEager']
 
+  const computedInject: typeof import('@vueuse/core')['computedInject']
 
+  const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
 
+  const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
 
+  const controlledRef: typeof import('@vueuse/core')['controlledRef']
 
+  const createEventHook: typeof import('@vueuse/core')['createEventHook']
 
+  const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
 
+  const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
 
+  const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
 
+  const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
 
+  const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
 
+  const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
 
+  const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
 
+  const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
 
+  const extendRef: typeof import('@vueuse/core')['extendRef']
 
+  const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
 
+  const isDefined: typeof import('@vueuse/core')['isDefined']
 
+  const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
 
+  const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
 
+  const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
 
+  const onLongPress: typeof import('@vueuse/core')['onLongPress']
 
+  const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
 
+  const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
 
+  const reactify: typeof import('@vueuse/core')['reactify']
 
+  const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
 
+  const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
 
+  const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
 
+  const reactivePick: typeof import('@vueuse/core')['reactivePick']
 
+  const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
 
+  const refDebounced: typeof import('@vueuse/core')['refDebounced']
 
+  const refDefault: typeof import('@vueuse/core')['refDefault']
 
+  const refThrottled: typeof import('@vueuse/core')['refThrottled']
 
+  const refWithControl: typeof import('@vueuse/core')['refWithControl']
 
+  const resolveRef: typeof import('@vueuse/core')['resolveRef']
 
+  const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
 
+  const syncRef: typeof import('@vueuse/core')['syncRef']
 
+  const syncRefs: typeof import('@vueuse/core')['syncRefs']
 
+  const templateRef: typeof import('@vueuse/core')['templateRef']
 
+  const throttledRef: typeof import('@vueuse/core')['throttledRef']
 
+  const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
 
+  const toReactive: typeof import('@vueuse/core')['toReactive']
 
+  const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
 
+  const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
 
+  const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
 
+  const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
 
+  const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
 
+  const unrefElement: typeof import('@vueuse/core')['unrefElement']
 
+  const until: typeof import('@vueuse/core')['until']
 
+  const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
 
+  const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
 
+  const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
 
+  const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
 
+  const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
 
+  const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
 
+  const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
 
+  const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
 
+  const useArraySome: typeof import('@vueuse/core')['useArraySome']
 
+  const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
 
+  const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
 
+  const useBase64: typeof import('@vueuse/core')['useBase64']
 
+  const useBattery: typeof import('@vueuse/core')['useBattery']
 
+  const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
 
+  const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
 
+  const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
 
+  const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
 
+  const useCached: typeof import('@vueuse/core')['useCached']
 
+  const useClipboard: typeof import('@vueuse/core')['useClipboard']
 
+  const useColorMode: typeof import('@vueuse/core')['useColorMode']
 
+  const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
 
+  const useCounter: typeof import('@vueuse/core')['useCounter']
 
+  const useCssVar: typeof import('@vueuse/core')['useCssVar']
 
+  const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
 
+  const useCycleList: typeof import('@vueuse/core')['useCycleList']
 
+  const useDark: typeof import('@vueuse/core')['useDark']
 
+  const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
 
+  const useDebounce: typeof import('@vueuse/core')['useDebounce']
 
+  const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
 
+  const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
 
+  const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
 
+  const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
 
+  const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
 
+  const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
 
+  const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
 
+  const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
 
+  const useDraggable: typeof import('@vueuse/core')['useDraggable']
 
+  const useDropZone: typeof import('@vueuse/core')['useDropZone']
 
+  const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
 
+  const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
 
+  const useElementHover: typeof import('@vueuse/core')['useElementHover']
 
+  const useElementSize: typeof import('@vueuse/core')['useElementSize']
 
+  const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
 
+  const useEventBus: typeof import('@vueuse/core')['useEventBus']
 
+  const useEventListener: typeof import('@vueuse/core')['useEventListener']
 
+  const useEventSource: typeof import('@vueuse/core')['useEventSource']
 
+  const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
 
+  const useFavicon: typeof import('@vueuse/core')['useFavicon']
 
+  const useFetch: typeof import('@vueuse/core')['useFetch']
 
+  const useFileDialog: typeof import('@vueuse/core')['useFileDialog']
 
+  const useFileSystemAccess: typeof import('@vueuse/core')['useFileSystemAccess']
 
+  const useFocus: typeof import('@vueuse/core')['useFocus']
 
+  const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
 
+  const useFps: typeof import('@vueuse/core')['useFps']
 
+  const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
 
+  const useGamepad: typeof import('@vueuse/core')['useGamepad']
 
+  const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
 
+  const useIdle: typeof import('@vueuse/core')['useIdle']
 
+  const useImage: typeof import('@vueuse/core')['useImage']
 
+  const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
 
+  const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
 
+  const useInterval: typeof import('@vueuse/core')['useInterval']
 
+  const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
 
+  const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
 
+  const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
 
+  const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
 
+  const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
 
+  const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
 
+  const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
 
+  const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
 
+  const useMemoize: typeof import('@vueuse/core')['useMemoize']
 
+  const useMemory: typeof import('@vueuse/core')['useMemory']
 
+  const useMounted: typeof import('@vueuse/core')['useMounted']
 
+  const useMouse: typeof import('@vueuse/core')['useMouse']
 
+  const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
 
+  const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
 
+  const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
 
+  const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
 
+  const useNetwork: typeof import('@vueuse/core')['useNetwork']
 
+  const useNow: typeof import('@vueuse/core')['useNow']
 
+  const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
 
+  const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
 
+  const useOnline: typeof import('@vueuse/core')['useOnline']
 
+  const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
 
+  const useParallax: typeof import('@vueuse/core')['useParallax']
 
+  const usePermission: typeof import('@vueuse/core')['usePermission']
 
+  const usePointer: typeof import('@vueuse/core')['usePointer']
 
+  const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
 
+  const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
 
+  const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
 
+  const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
 
+  const useRafFn: typeof import('@vueuse/core')['useRafFn']
 
+  const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
 
+  const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
 
+  const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
 
+  const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
 
+  const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
 
+  const useScroll: typeof import('@vueuse/core')['useScroll']
 
+  const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
 
+  const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
 
+  const useShare: typeof import('@vueuse/core')['useShare']
 
+  const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
 
+  const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
 
+  const useStepper: typeof import('@vueuse/core')['useStepper']
 
+  const useStorage: typeof import('@vueuse/core')['useStorage']
 
+  const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
 
+  const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
 
+  const useSupported: typeof import('@vueuse/core')['useSupported']
 
+  const useSwipe: typeof import('@vueuse/core')['useSwipe']
 
+  const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
 
+  const useTextDirection: typeof import('@vueuse/core')['useTextDirection']
 
+  const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
 
+  const useTextareaAutosize: typeof import('@vueuse/core')['useTextareaAutosize']
 
+  const useThrottle: typeof import('@vueuse/core')['useThrottle']
 
+  const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
 
+  const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
 
+  const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
 
+  const useTimeout: typeof import('@vueuse/core')['useTimeout']
 
+  const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
 
+  const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll']
 
+  const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
 
+  const useTitle: typeof import('@vueuse/core')['useTitle']
 
+  const useToggle: typeof import('@vueuse/core')['useToggle']
 
+  const useTransition: typeof import('@vueuse/core')['useTransition']
 
+  const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
 
+  const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
 
+  const useVModel: typeof import('@vueuse/core')['useVModel']
 
+  const useVModels: typeof import('@vueuse/core')['useVModels']
 
+  const useVibrate: typeof import('@vueuse/core')['useVibrate']
 
+  const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
 
+  const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
 
+  const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
 
+  const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
 
+  const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
 
+  const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
 
+  const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
 
+  const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
 
+  const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
 
+  const watchArray: typeof import('@vueuse/core')['watchArray']
 
+  const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
 
+  const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
 
+  const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
 
+  const watchOnce: typeof import('@vueuse/core')['watchOnce']
 
+  const watchPausable: typeof import('@vueuse/core')['watchPausable']
 
+  const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
 
+  const watchTriggerable: typeof import('@vueuse/core')['watchTriggerable']
 
+  const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
 
+  const whenever: typeof import('@vueuse/core')['whenever']
 
+}

+ 36 - 0
src/h5/components.d.ts
Zobraziť súbor 

@@ -0,0 +1,36 @@
 
+// generated by unplugin-vue-components
 
+// We suggest you to commit this file into source control
 
+// Read more: https://github.com/vuejs/core/pull/3399
 
+import '@vue/runtime-core'
 
+
 
+export {}
 
+
 
+declare module '@vue/runtime-core' {
 
+  export interface GlobalComponents {
 
+    Feature: typeof import('./components/Feature.vue')['default']
 
+    Features: typeof import('./components/Features.vue')['default']
 
+    Hero: typeof import('./components/Hero.vue')['default']
 
+    HomeNew: typeof import('./pages/home/_components/home-new.vue')['default']
 
+    HomeTags: typeof import('./pages/home/_components/home-tags.vue')['default']
 
+    LayoutBasic: typeof import('./components/layout-basic/layout-basic.vue')['default']
 
+    LayoutUser: typeof import('./components/layout-user/layout-user.vue')['default']
 
+    LayoutUserHeader: typeof import('./components/layout-user/layout-user-header.vue')['default']
 
+    LayoutUserMenu: typeof import('./components/layout-user/layout-user-menu.vue')['default']
 
+    Navbar: typeof import('./components/Navbar.vue')['default']
 
+    RouterLink: typeof import('vue-router')['RouterLink']
 
+    RouterView: typeof import('vue-router')['RouterView']
 
+    UiDevider: typeof import('./components/ui-devider/ui-devider.vue')['default']
 
+    UiInput: typeof import('./components/ui-input/ui-input.vue')['default']
 
+    UiMainArticle: typeof import('./components/ui-main-article/ui-main-article.vue')['default']
 
+    UiNavBar: typeof import('./components/ui-nav-bar/ui-nav-bar.vue')['default']
 
+    UiOrderTable: typeof import('./components/ui-order-table/ui-order-table.vue')['default']
 
+    UiPortal: typeof import('./components/ui-portal/ui-portal.vue')['default']
 
+    UiShadowBox: typeof import('./components/ui-shadow-box/ui-shadow-box.vue')['default']
 
+    UiSmallArticle: typeof import('./components/ui-small-article/ui-small-article.vue')['default']
 
+    UiSwiper: typeof import('./components/ui-swiper/ui-swiper.vue')['default']
 
+    UiTitleDevider: typeof import('./components/ui-title-devider/ui-title-devider.vue')['default']
 
+    UiVipArticle: typeof import('./components/ui-vip-article/ui-vip-article.vue')['default']
 
+    UiVipPreset: typeof import('./components/ui-vip-preset/ui-vip-preset.vue')['default']
 
+    UserAccountSettingInfoItem: typeof import('./pages/user/_components/user-account-setting-info-item.vue')['default']
 
+  }
 
+}

src/components/Feature.vue → src/h5/components/Feature.vue
Zobraziť súbor


src/components/Features.vue → src/h5/components/Features.vue
Zobraziť súbor


src/components/Hero.vue → src/h5/components/Hero.vue
Zobraziť súbor


src/components/Navbar.vue → src/h5/components/Navbar.vue
Zobraziť súbor


src/components/layout-basic/layout-basic.vue → src/h5/components/layout-basic/layout-basic.vue
Zobraziť súbor


src/components/layout-user/layout-user-header.vue → src/h5/components/layout-user/layout-user-header.vue
Zobraziť súbor


src/components/layout-user/layout-user-menu.vue → src/h5/components/layout-user/layout-user-menu.vue
Zobraziť súbor


src/components/layout-user/layout-user.vue → src/h5/components/layout-user/layout-user.vue
Zobraziť súbor


src/components/ui-devider/ui-devider.vue → src/h5/components/ui-devider/ui-devider.vue
Zobraziť súbor


src/components/ui-input/ui-input.vue → src/h5/components/ui-input/ui-input.vue
Zobraziť súbor


src/components/ui-main-article/ui-main-article.vue → src/h5/components/ui-main-article/ui-main-article.vue
Zobraziť súbor


+ 12 - 2
src/components/ui-nav-bar/ui-nav-bar.vue
Zobraziť súbor 

@@ -64,13 +64,14 @@
 
       </div>
 
       <div class="w-40px"></div>
 
       <div
 
-        @click="$router.push('/login')"
 
+        @click="$router.push('/user/personal-center')"
 
         :class="`menu-item ${currentPath === '/login' ? 'selected' : ''}`"
 
       >
 
         {{ $t("登录注册") }}
 
       </div>
 
       <div class="w-44px"></div>
 
       <div
 
+        @click="changeLang"
 
         class="w-30px h-30px rounded-full border-white-2px text-white align-middle text-center cursor-pointer"
 
       >
 
         {{ $t("cn") }}
 
@@ -100,9 +101,17 @@
 
 
 <script>
 
 export default {
 
+  
   mounted() {
 
-    // this.$i18n.locale = "zh-TW";
 
+    
   },
 
+  methods:{
 
+    changeLang(){
 
+      
+      this.$i18n.locale = this.lang[0];
 
+      this.lang = this.lang.reverse()
 
+    }
 
+  },  
   watch: {
 
     $route: function (next) {
 
       console.log(next.path);
 
@@ -113,6 +122,7 @@ export default {
 
     return {
 
       typeVisible: false,
 
       currentPath: this.$route.path,
 
+      lang: ['zh-CN','zh-TW']
 
     };
 
   },
 
 };

src/components/ui-order-table/ui-order-table.vue → src/h5/components/ui-order-table/ui-order-table.vue
Zobraziť súbor


src/components/ui-portal/ui-portal.vue → src/h5/components/ui-portal/ui-portal.vue
Zobraziť súbor


src/components/ui-shadow-box/ui-shadow-box.vue → src/h5/components/ui-shadow-box/ui-shadow-box.vue
Zobraziť súbor


src/components/ui-small-article/ui-small-article.vue → src/h5/components/ui-small-article/ui-small-article.vue
Zobraziť súbor


src/components/ui-swiper/ui-swiper.vue → src/h5/components/ui-swiper/ui-swiper.vue
Zobraziť súbor


src/components/ui-title-devider/ui-title-devider.vue → src/h5/components/ui-title-devider/ui-title-devider.vue
Zobraziť súbor


src/components/ui-vip-article/ui-vip-article.vue → src/h5/components/ui-vip-article/ui-vip-article.vue
Zobraziť súbor


src/components/ui-vip-preset/ui-vip-preset.vue → src/h5/components/ui-vip-preset/ui-vip-preset.vue
Zobraziť súbor


+ 22 - 0
src/h5/index.html
Zobraziť súbor 

@@ -0,0 +1,22 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="utf-8" />
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
+    <meta
 
+      name="viewport"
 
+      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
 
+    />
 
+    <link rel="icon" href="/favicon.ico" />
 
+    <title>周刊</title>
 
+  </head>
 
+  <style>
 
+    html {
 
+      font-size: calc(100vw / 750 );
 
+    }
 
+  </style>
 
+  <body>
 
+    <div id="app"></div>
 
+    <script type="module" src="/src/h5/main.js"></script>
 
+  </body>
 
+</html>

+ 5 - 5
src/main.js
Zobraziť súbor 

@@ -1,14 +1,14 @@
 
 import Vue from "vue";
 
-import App from "@/App.vue";
 
+import App from "@h5/App.vue";
 
 import VueI18n from "vue-i18n";
 
 
 import 'virtual:windi.css'
 
-import router from "@/router";
 
-import zhCN from "./locales/zh-CN";
 
-import zhTW from "./locales/zh-TW";
 
+import router from "@pc/router";
 
+import zhCN from "../common/locales/zh-CN";
 
+import zhTW from "../common/locales/zh-TW";
 
 import ElementUI from 'element-ui';
 
 import 'element-ui/lib/theme-chalk/index.css';
 
-import '@/assets/css/index.css'
 
+import '@pc/assets/css/index.css'
 
 
 Vue.use(ElementUI);

src/pages/aboutus/aboutus.vue → src/h5/pages/aboutus/aboutus.vue
Zobraziť súbor


+ 356 - 0
src/h5/pages/article-detail/article-detail.vue
Zobraziť súbor 

@@ -0,0 +1,356 @@
 
+<template>
 
+  <div class="w-1200px detail">
 
+    <img src="/imgs/article-banner.png" class="my-20px" />
 
+    <div class="flex">
 
+      <div class="left mr-20px w-860px">
 
+        <ui-shadow-box class="w-full bg-white h-auto px-30px pt-30px mb-14px">
 
+          <div class="text-size-24px text-[#000] font-thin mb-27px">
 
+            这里是文章标题这里是文章标题，文章标题
 
+          </div>
 
+          <div
 
+            class="flex text-[#B8B8B8] text-size-14px items-center justify-between mb-33px"
 
+          >
 
+            <div class="flex items-center">
 
+              <div>香港特派员赵圆松</div>
 
+              <div class="ml-48px flex items-center">
 
+                <img class="w-18px h-auto mr-8px" src="/imgs/time.png" />
 
+                <span>2022-08-26</span>
 
+              </div>
 
+            </div>
 
+            <div class="flex items-center">
 
+              <div class="mr-48px">5评论</div>
 
+              <div class="mr-48px">10点赞</div>
 
+              <div class="mr-48px">56收藏</div>
 
+              <div>36582浏览</div>
 
+            </div>
 
+          </div>
 
+          <div
 
+            class="bg-[#F7F7F7] p-24px text-[#686868] text-size-16px leading-32px whitespace-pre-wrap mb-30px"
 
+          >
 
+            <p class="indent-32px">
 
+              这里是文章简介或摘要内容，这里是文章简介或摘要内容这里是文章简介或摘要内容，这里是文章简介
 
+              或摘容，这里是文章简介或摘要内容，这里是文章简介或摘要内容这里是文章简介或摘要内容。这里是文章
 
+              简介或摘要内容，这里是文章简介或摘要内容，这里是文章简介或摘要内容这里是文章简介或摘要内容。
 
+            </p>
 
+          </div>
 
+          <div class="content" v-html="html"></div>
 
+          <div
 
+            class="p-24px bg-[#f7f7f7] text-[#686868] leading-32px text-size-16px mb-30px"
 
+          >
 
+            <p>作者：香港特派员赵圆松；期刊：尖瑞科技期刊（ID：business-data）</p>
 
+            <p>本文由 @商业数据派 原创发布于杂志期刊，未经许可，禁止转载。</p>
 
+            <p>题图来自 Unsplash，基于CC0协议</p>
 
+          </div>
 
+          <div class="flex justify-center mb-30px">
 
+            <el-button type="primary" round class="h-40px w-400px"
 
+              >成为会员，查看更多精彩内容！</el-button
 
+            >
 
+          </div>
 
+          <ui-devider class="mb-30px"></ui-devider>
 
+          <div class="flex items-center justify-between">
 
+            <div class="flex">
 
+              <el-switch v-model="subscriped" inactive-color="#E1E1E1" class="mr-10px">
 
+              </el-switch>
 
+
 
+              <div class="text-size-16px">开启订阅，将为您推荐同类精彩内容！</div>
 
+            </div>
 
+            <div class="flex items-center">
 
+              <el-button class="action-button done" round> 收藏 | 2 </el-button>
 
+              <el-button class="action-button" round> 点赞 | 20 </el-button>
 
+              <el-button @click="exportVisible = true" class="action-button" round>
 
+                分享
 
+              </el-button>
 
+            </div>
 
+          </div>
 
+          <div class="h-46px"></div>
 
+        </ui-shadow-box>
 
+        <ui-shadow-box class="px-30px pt-37px pb-44px">
 
+          <div class="flex justify-between items-center mb-18px">
 
+            <div class="flex items-center">
 
+              <div class="text-size-24px mr-12px">{{ $t("评论") }}</div>
 
+              <div class="text-size-14px text-[#686868]">
 
+                {{ $t("文明上网，理性发言！") }}
 
+              </div>
 
+            </div>
 
+            <div class="text-size-14px text-primary">123{{ $t("条评论") }}</div>
 
+          </div>
 
+          <el-input
 
+            class="!bg-[#F7F7F7] h-100px mb-20px"
 
+            type="textarea"
 
+            :rows="2"
 
+            :placeholder="$t('我来说两句')"
 
+            v-model="textarea"
 
+          >
 
+          </el-input>
 
+          <div class="flex justify-end mb-14px">
 
+            <el-button type="primary" class="text-white h-30px !py-0" round
 
+              >发布</el-button
 
+            >
 
+          </div>
 
+          <div class="text-size-20px mb-16px">全部评论</div>
 
+          <ui-devider></ui-devider>
 
+          <div v-for="item in 4" :key="item">
 
+            <div class="flex items-start py-30px">
 
+              <img class="w-60px h-60px round" src="/imgs/avatar.png" />
 
+              <div class="mt-8px ml-14px">
 
+                <div class="flex mb-14px items-center">
 
+                  <div class="font-extralight text-size-16px mr-30px">用户名</div>
 
+                  <div class="text-size-14px text-[#B8B8B8]">2022-08-26 06:53</div>
 
+                </div>
 
+                <div class="text-[#686868] leading-20px text-size-14px">
 
+                  评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <ui-devider></ui-devider>
 
+          </div>
 
+          <div class="flex justify-center">
 
+            <el-button type="text" class="!text-[#686868]">查看更多评论</el-button>
 
+          </div>
 
+        </ui-shadow-box>
 
+      </div>
 
+
 
+      <div class="right w-320px">
 
+        <div class="px-20px bg-white">
 
+          <div class="h-17px"></div>
 
+          <div class="relative inline-flex mb-6.5px">
 
+            <img src="/imgs/hot.png" class="w-24px h-auto mr-4px" />
 
+            <div class="font-thin text-[#000] text-size-20px">{{ $t("热榜文章") }}</div>
 
+
 
+            <div
 
+              class="w-full h-3px absolute left-0 bottom-[-7.5px] bg-primary rounded-full"
 
+            ></div>
 
+          </div>
 
+          <ui-devider></ui-devider>
 
+          <div class="h-21px"></div>
 
+          <ui-swiper
 
+            class="mb-20px"
 
+            :items="[
 
+              { url: '/imgs/article_cover1.png', title: '这是标题' },
 
+              { url: '/imgs/article_cover1.png', title: '这是标题' },
 
+            ]"
 
+            titleClass="swiper-title"
 
+          ></ui-swiper>
 
+          <ui-devider></ui-devider>
 
+
 
+          <div v-for="item in 9" :key="item">
 
+            <ui-small-article></ui-small-article>
 
+            <ui-devider></ui-devider>
 
+          </div>
 
+        </div>
 
+        <div class="h-20px"></div>
 
+        <div class="px-20px bg-white">
 
+          <div class="h-17px"></div>
 
+          <div class="relative flex mb-6.5px justify-between item-center">
 
+            <div class="inline-flex">
 
+              <img src="/imgs/vip.png" class="w-24px h-auto mr-4px" />
 
+              <div class="font-thin text-[#000] text-size-20px">
 
+                {{ $t("VIP期刊") }}
 
+              </div>
 
+            </div>
 
+            <el-button
 
+              type="text"
 
+              class="!p-0 !text-size-14px !font-normal !text-[#686868]"
 
+              >查看更多</el-button
 
+            >
 
+
 
+            <div
 
+              class="w-full h-3px absolute left-0 bottom-[-7.5px] bg-primary rounded-full"
 
+            ></div>
 
+          </div>
 
+          <ui-devider></ui-devider>
 
+          <div class="h-21px"></div>
 
+
 
+          <ui-swiper
 
+            class="mb-20px"
 
+            :items="[
 
+              { url: 'imgs/article_cover1.png', title: '这是标题' },
 
+              { url: 'imgs/article_cover1.png', title: '这是标题' },
 
+            ]"
 
+            titleClass="swiper-title"
 
+          ></ui-swiper>
 
+          <ui-swiper
 
+            class="mb-20px"
 
+            :items="[
 
+              { url: 'imgs/article_cover1.png', title: '这是标题' },
 
+              { url: 'imgs/article_cover1.png', title: '这是标题' },
 
+            ]"
 
+            titleClass="swiper-title"
 
+          ></ui-swiper>
 
+          <ui-devider></ui-devider>
 
+          <div v-for="item in 10" :key="item">
 
+            <ui-vip-article></ui-vip-article>
 
+            <ui-devider></ui-devider>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+    <el-dialog @close="exportVisible = false" :visible="exportVisible" width="1200px">
 
+      <div class="w-full">
 
+        <div class="flex items-center mb-60px">
 
+          <div class="flex-1 text-right mr-70px">{{ $t("分享链接") }}：</div>
 
+          <div class="flex-1">https://daohang.qq.com/?fr=hmpage</div>
 
+          <div class="flex-1 ml-84px">
 
+            <el-button
 
+              class="!font-normal !text-white !bg-primary !w-120px !h-40px"
 
+              round
 
+              >{{ $t("复制链接") }}</el-button
 
+            >
 
+          </div>
 
+        </div>
 
+        <div class="flex items-start">
 
+          <div class="flex-1 text-right mr-70px">{{ $t("分享海报") }}：</div>
 
+          <div class="flex-1">
 
+            <ui-shadow-box ref="post" class="px-24px py-38px flex flex-col items-center">
 
+              <div class="font-extralight text-primary text-size-20px mb-28px">
 
+                {{ $t("杂志期刊") }}
 
+              </div>
 
+              <img src="/imgs/export-cover.png" class="w-310px h-auto mb-24px" />
 
+              <div class="text-size-16px text-[#000A04] mb-32px">
 
+                这里是轮播图推荐内容标题这里是轮播图推荐内容标题...
 
+              </div>
 
+              <div class="text-size-14px text-[#686868] mb-24px">
 
+                这里是文章简介内容这里是文章简介内容这里是文章简介内容这里是文章简介内容这里是文这里是文章简介内容这里是文章简介内容这里是文章简介内容这......
 
+              </div>
 
+              <div class="flex items-center w-full justify-end">
 
+                <div class="mr-10px text-[#B8B8B8] text-size-14px">
 
+                  <div class="mb-10px">作者：香港特派员赵圆松</div>
 
+                  <div class="text-right">时间：2022-08-26</div>
 
+                </div>
 
+                <img src="/imgs/export-qrcode.png" class="w-64px h-64px" />
 
+              </div>
 
+            </ui-shadow-box>
 
+          </div>
 
+          <div class="flex-1 ml-84px">
 
+            <el-button
 
+              @click="exportPost"
 
+              class="!font-normal !text-white !bg-primary !w-120px !h-40px"
 
+              round
 
+              >{{ $t("复制海报") }}</el-button
 
+            >
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </el-dialog>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+import FileSaver from "file-saver";
 
+import domtoimage from "dom-to-image";
 
+export default {
 
+  methods: {
 
+    async exportPost() {
 
+      console.log(
 
+        "%c [ this.$refs.post ]-245",
 
+        "font-size:13px; background:pink; color:#bf2c9f;",
 
+        this.$refs.post.$el
 
+      );
 
+      const url = await domtoimage.toPng(this.$refs.post.$el, { filter: false });
 
+
 
+      FileSaver.saveAs(url, "post.png");
 
+    },
 
+  },
 
+  data() {
 
+    return {
 
+      exportVisible: false,
 
+      subscriped: true,
 
+      html: `<p><span style="font-size:16px">据央视新闻7月22日消息，俄罗斯国防部发言人科纳申科夫21日通报说，俄军在尼古拉耶夫和克拉玛托尔斯克打击了乌军多个指挥所。</span></p>
 
+
 
+<p>&nbsp;</p>
 
+
 
+<p>&nbsp;</p>
 
+
 
+<p><span style="font-size:16px"><img alt="" src="/imgs/article-detail-pic-1.png" style="width:100%" /></span></p>
 
+
 
+<p>&nbsp;</p>
 
+
 
+<p><span style="font-size:16px">据央视新闻7月22日消息，俄罗斯国防部发言人科纳申科夫21日通报说，俄军在尼古拉耶夫和克拉玛托尔斯克打击了乌军多个指挥所。</span></p>
 
+
 
+<p>&nbsp;</p>
 
+
 
+<p>&nbsp;</p>
 
+
 
+<p><span style="font-size:16px">另据央视新闻报道称，当地时间21日，欧洲理事会公布了针对俄罗斯的新制裁措施，包括禁止进口来自俄罗斯金和珠宝；增加了俄罗斯可用于军用的物资和技术禁运清单，增加了对俄罗斯个人和实体的制裁。俄军打击乌军指挥所 乌军击退俄军进攻</span></p>
 
+
 
+<p>&nbsp;</p>
 
+
 
+<p>&nbsp;</p>
 
+
 
+<p><span style="font-size:16px">俄罗斯国防部发言人科纳申科夫21日通报说，俄军在尼古拉耶夫和克拉玛托尔斯克打击了乌军多个指挥所，在顿涅茨克和尼古拉耶夫等地摧毁了多个乌军弹药库。另外，俄军还击落乌空军1架苏-25战机、1架米-8直升机和5架军用无人机。</span></p>
 
+
 
+<p>&nbsp;</p>
 
+
 
+<p>&nbsp;</p>
 
+
 
+<p><span style="font-size:16px">另据乌克兰国家通讯社21日援引乌各地军事部门的消息报道，俄军继续对苏梅、哈尔科夫、卢甘斯克、顿涅茨克等地区进行大规模炮击。在乌军阻击下，俄军未能在巴赫穆特方向取得突破，没有占领乌格列戈尔斯克发电厂。</span></p>
 
+
 
+<p>&nbsp;</p>
 
+
 
+<p>&nbsp;</p>
 
+
 
+<p><span style="font-size:16px">俄外长称在乌军事目标发生变化，与西方向乌军提供武器有关。</span></p>
 
+
 
+<p>&nbsp;</p>
 
+
 
+<p>&nbsp;</p>
 
+
 
+<p><span style="font-size:16px"><img alt="" src="/imgs/article-detail-pic-1.png" style="width:100%" /></span></p>
 
+
 
+<p>&nbsp;</p>
 
+
 
+<p><span style="font-size:16px">据央视新闻7月22日消息，俄罗斯国防部发言人科纳申科夫21日通报说，俄军在尼古拉耶夫和克拉玛托尔斯克打击了乌军多个指挥所。</span></p>
 
+
 
+<p>&nbsp;</p>
 
+
 
+<p>&nbsp;</p>
 
+
 
+<p><span style="font-size:16px">另据央视新闻报道称，当地时间21日，欧洲理事会公布了针对俄罗斯的新制裁措施，包括禁止进口来自俄罗斯金和珠宝；增加了俄罗斯可用于军用的物资和技术禁运清单，增加了对俄罗斯个人和实体的制裁。俄军打击乌军指挥所 乌军击退俄军进攻</span></p>
 
+
 
+<p>&nbsp;</p>
 
+
 
+<p>&nbsp;</p>
 
+
 
+<p><span style="font-size:16px">俄罗斯国防部发言人科纳申科夫21日通报说，俄军在尼古拉耶夫和克拉玛托尔斯克打击了乌军多个指挥所，在顿涅茨克和尼古拉耶夫等地摧毁了多个乌军弹药库。另外，俄军还击落乌空军1架苏-25战机、1架米-8直升机和5架军用无人机。</span></p>
 
+
 
+<p>&nbsp;</p>
 
+
 
+<p>&nbsp;</p>
 
+
 
+<p><span style="font-size:16px">另据乌克兰国家通讯社21日援引乌各地军事部门的消息报道，俄军继续对苏梅、哈尔科夫、卢甘斯克、顿涅茨克等地区进行大规模炮击。在乌军阻击下，俄军未能在巴赫穆特方向取得突破，没有占领乌格列戈尔斯克发电厂。</span></p>
 
+
 
+<p>&nbsp;</p>
 
+
 
+<p>&nbsp;</p>
 
+
 
+<p><span style="font-size:16px">俄外长称在乌军事目标发生变化，与西方向乌军提供武器有关。</span></p>
 
+
 
+<p>&nbsp;</p>
 
+
 
+<p>&nbsp;</p>
 
+
 
+<p><span style="font-size:16px">作者：香港特派员赵圆松；期刊：尖瑞科技期刊（ID：business-data）<br />
 
+本文由 @商业数据派 原创发布于人人都是产品经理，未经许可，禁止转载。<br />
 
+题图来自 Unsplash，基于CC0协议</span></p>
 
+<p>&nbsp;</p>
 
+
 
+<p>&nbsp;</p>
 
+`,
 
+    };
 
+  },
 
+};
 
+</script>
 
+
 
+<style>
 
+.detail .content {
 
+}
 
+.detail .action-button {
 
+  @apply !font-light border-1px !border-primary border-solid !text-primary ml-30px;
 
+}
 
+.detail .action-button.done {
 
+  @apply bg-primary !text-white;
 
+}
 
+.detail .el-textarea textarea {
 
+  @apply h-full bg-[#F7F7F7];
 
+}
 
+</style>

src/pages/auth/change-password.vue → src/h5/pages/auth/change-password.vue
Zobraziť súbor


src/pages/auth/login.vue → src/h5/pages/auth/login.vue
Zobraziť súbor


+ 87 - 0
src/h5/pages/auth/profile-complete.vue
Zobraziť súbor 

@@ -0,0 +1,87 @@
 
+<template>
 
+  <div class="w1200px bg-white mt-20px px-100px pb-100px">
 
+    <div class="h-33px"></div>
 
+    <ui-title-devider :title="$t('请设置个人相关信息后进入')"></ui-title-devider>
 
+    <div class="h-14px"></div>
 
+    <user-account-setting-info-item label="头像">
 
+      <div class="pl-20px">
 
+        <img src="/imgs/avatar.png" class="w-80px h-80px" />
 
+      </div>
 
+    </user-account-setting-info-item>
 
+    <user-account-setting-info-item
 
+      label="昵称"
 
+      text="cyt"
 
+    ></user-account-setting-info-item>
 
+    <user-account-setting-info-item
 
+      label="账号"
 
+      text="15486323563@qq.com"
 
+    ></user-account-setting-info-item>
 
+    <user-account-setting-info-item label="密码">
 
+      <div class="pl-20px flex items-center">
 
+        <div v-if="!showPass" class="mr-50px">*********</div>
 
+        <div v-else class="mr-50px">1231asadas</div>
 
+        <div @click="showPass = !showPass">
 
+          <img
 
+            v-if="!showPass"
 
+            src="/imgs/eye_icon.png"
 
+            class="w-30px h-auto cursor-pointer"
 
+          />
 
+          <img
 
+            v-else
 
+            src="/imgs/eye_close_icon.png"
 
+            class="w-30px h-auto cursor-pointer"
 
+          />
 
+        </div>
 
+      </div>
 
+    </user-account-setting-info-item>
 
+    <user-account-setting-info-item :required="true" label="姓名">
 
+      <ui-input v-model="name" class="!w-345px"></ui-input>
 
+    </user-account-setting-info-item>
 
+    <user-account-setting-info-item :required="true" label="电话">
 
+      <ui-input v-model="phone" class="!w-345px">
 
+        <div slot="suffix" class="flex items-center h-full">
 
+          <div class="text-black">+86</div>
 
+          <div class="w-12px"></div>
 
+          <img src="/imgs/menu-arrow.png" class="w-6px h-auto" />
 
+          <div class="w-16px"></div>
 
+        </div> </ui-input
 
+    ></user-account-setting-info-item>
 
+    <user-account-setting-info-item :required="true" label="性别">
 
+      <el-radio-group v-model="gender">
 
+        <el-radio :label="0">女</el-radio>
 
+        <el-radio :label="1">男</el-radio>
 
+      </el-radio-group>
 
+    </user-account-setting-info-item>
 
+    <user-account-setting-info-item label="职业">
 
+      <ui-input v-model="job" class="!w-728px"></ui-input>
 
+    </user-account-setting-info-item>
 
+    <user-account-setting-info-item label="工作单位">
 
+      <ui-input v-model="jobUnit" class="!w-728px"></ui-input>
 
+    </user-account-setting-info-item>
 
+    <user-account-setting-info-item label="地址">
 
+      <ui-input v-model="addr" class="!w-728px"></ui-input>
 
+    </user-account-setting-info-item>
 
+    <div class="flex justify-center">
 
+      <el-button @click="$router.push('/home')" type="primary ">{{ $t("确定") }}</el-button>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+import {} from "element-ui";
 
+export default {
 
+  data() {
 
+    return {
 
+      gender: 0,
 
+      name: "陈小婷",
 
+      phone: "18926145678",
 
+      job: "产品经理",
 
+      jobUnit: "广州量子互联科技有限公司",
 
+      addr: "广州市黄埔区联和街道黄埔科学大道112号绿地广场1710室",
 
+      showPass: false,
 
+    };
 
+  },
 
+};
 
+</script>
 
+
 
+<style></style>

src/pages/home/_components/home-new.vue → src/h5/pages/home/_components/home-new.vue
Zobraziť súbor


src/pages/home/_components/home-tags.vue → src/h5/pages/home/_components/home-tags.vue
Zobraziť súbor


+ 2 - 2
src/pages/home/home.vue
Zobraziť súbor 

@@ -46,8 +46,8 @@
 
           <ui-swiper
 
             class="mb-20px"
 
             :items="[
 
-              { url: 'imgs/article_cover1.png', title: '这是标题' },
 
-              { url: 'imgs/article_cover1.png', title: '这是标题' },
 
+              { url: '/imgs/article_cover1.png', title: '这是标题' },
 
+              { url: '/imgs/article_cover1.png', title: '这是标题' },
 
             ]"
 
             titleClass="swiper-title"
 
           ></ui-swiper>

src/pages/product/order-detail.vue → src/h5/pages/product/order-detail.vue
Zobraziť súbor


src/pages/product/product-detail.vue → src/h5/pages/product/product-detail.vue
Zobraziť súbor


src/pages/publish/publish.vue → src/h5/pages/publish/publish.vue
Zobraziť súbor


+ 142 - 0
src/h5/pages/realtime-news/realtime-news.vue
Zobraziť súbor 

@@ -0,0 +1,142 @@
 
+<template>
 
+  <div>
 
+    <ui-swiper
 
+      :showPagination="true"
 
+      :items="banner1"
 
+      class="w-screen h-350px"
 
+    ></ui-swiper>
 
+
 
+    <div class="w-1200px m-auto">
 
+      <div class="flex justify-between">
 
+        <div class="left w-860px">
 
+          <div class="h-20px"></div>
 
+          <div v-for="item in 5" :key="item">
 
+            <ui-main-article></ui-main-article>
 
+            <div class="h-20px"></div>
 
+          </div>
 
+          <ui-shadow-box class="w-full h-100px mb-20px">
 
+            <img src="/imgs/split-pic-1.png" class="w-full h-full object-cover" />
 
+          </ui-shadow-box>
 
+          <div v-for="item in 5" :key="item">
 
+            <ui-main-article></ui-main-article>
 
+            <div class="h-20px"></div>
 
+          </div>
 
+          <ui-shadow-box class="w-full h-100px mb-20px">
 
+            <img src="/imgs/split-pic-2.png" class="w-full h-full object-cover" />
 
+          </ui-shadow-box>
 
+          <div v-for="item in 5" :key="item">
 
+            <ui-main-article></ui-main-article>
 
+            <div class="h-20px"></div>
 
+          </div>
 
+        </div>
 
+        <div class="right w-320px">
 
+          <div class="px-20px bg-white">
 
+            <div class="h-17px"></div>
 
+            <div class="relative inline-flex mb-6.5px">
 
+              <img src="/imgs/hot.png" class="w-24px h-auto mr-4px" />
 
+              <div class="font-thin text-[#000] text-size-20px">{{ $t("热榜文章") }}</div>
 
+
 
+              <div
 
+                class="w-full h-3px absolute left-0 bottom-[-7.5px] bg-primary rounded-full"
 
+              ></div>
 
+            </div>
 
+            <ui-devider></ui-devider>
 
+            <div class="h-21px"></div>
 
+            <ui-swiper
 
+              class="mb-20px"
 
+              :items="[
 
+                { url: '/imgs/article_cover1.png', title: '这是标题' },
 
+              { url: '/imgs/article_cover1.png', title: '这是标题' },
 
+              ]"
 
+              titleClass="swiper-title"
 
+            ></ui-swiper>
 
+            <ui-devider></ui-devider>
 
+
 
+            <div v-for="item in 9" :key="item">
 
+              <ui-small-article></ui-small-article>
 
+              <ui-devider></ui-devider>
 
+            </div>
 
+          </div>
 
+          <div class="h-20px"></div>
 
+          <div class="px-20px bg-white">
 
+            <div class="h-17px"></div>
 
+            <div class="relative flex mb-6.5px justify-between item-center">
 
+              <div class="inline-flex">
 
+                <img src="/imgs/vip.png" class="w-24px h-auto mr-4px" />
 
+                <div class="font-thin text-[#000] text-size-20px">
 
+                  {{ $t("VIP期刊") }}
 
+                </div>
 
+              </div>
 
+              <el-button
 
+                type="text"
 
+                class="!p-0 !text-size-14px !font-normal !text-[#686868]"
 
+                >查看更多</el-button
 
+              >
 
+
 
+              <div
 
+                class="w-full h-3px absolute left-0 bottom-[-7.5px] bg-primary rounded-full"
 
+              ></div>
 
+            </div>
 
+            <ui-devider></ui-devider>
 
+            <div class="h-21px"></div>
 
+
 
+            <ui-swiper
 
+              class="mb-20px"
 
+              :items="[
 
+                { url: 'imgs/article_cover1.png', title: '这是标题' },
 
+                { url: 'imgs/article_cover1.png', title: '这是标题' },
 
+              ]"
 
+              titleClass="swiper-title"
 
+            ></ui-swiper>
 
+            <ui-swiper
 
+              class="mb-20px"
 
+              :items="[
 
+                { url: 'imgs/article_cover1.png', title: '这是标题' },
 
+                { url: 'imgs/article_cover1.png', title: '这是标题' },
 
+              ]"
 
+              titleClass="swiper-title"
 
+            ></ui-swiper>
 
+            <ui-devider></ui-devider>
 
+            <div v-for="item in 10" :key="item">
 
+              <ui-vip-article></ui-vip-article>
 
+              <ui-devider></ui-devider>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  data() {
 
+    return {
 
+      banner1: [
 
+        { url: "/imgs/banner1.png", title: "這裏是輪播圖推薦內容標題" },
 
+        { url: "/imgs/banner1.png", title: "這裏是輪播圖推薦內容標題" },
 
+        { url: "/imgs/banner1.png", title: "這裏是輪播圖推薦內容標題" },
 
+        { url: "/imgs/banner1.png", title: "這裏是輪播圖推薦內容標題" },
 
+        { url: "/imgs/banner1.png", title: "這裏是輪播圖推薦內容標題" },
 
+      ],
 
+    };
 
+  },
 
+};
 
+</script>
 
+<style>
 
+.swiper-group {
 
+  display: grid;
 
+  grid-template-columns: repeat(2, 290px);
 
+  grid-template-rows: repeat(2, 163px);
 
+  grid-gap: 10px;
 
+}
 
+.swiper {
 
+  @apply w-290px;
 
+
 
+  /* align-items: end; */
 
+  /* @apply w-290px h-163px; */
 
+}
 
+.swiper-title {
 
+  @apply bottom-17px left-17px text-size-16px;
 
+}
 
+</style>

+ 142 - 0
src/h5/pages/recommend/recommend.vue
Zobraziť súbor 

@@ -0,0 +1,142 @@
 
+<template>
 
+  <div>
 
+    <ui-swiper
 
+      :showPagination="true"
 
+      :items="banner1"
 
+      class="w-screen h-350px"
 
+    ></ui-swiper>
 
+
 
+    <div class="w-1200px m-auto">
 
+      <div class="flex justify-between">
 
+        <div class="left w-860px">
 
+          <div class="h-20px"></div>
 
+          <div v-for="item in 5" :key="item">
 
+            <ui-main-article></ui-main-article>
 
+            <div class="h-20px"></div>
 
+          </div>
 
+          <ui-shadow-box class="w-full h-100px mb-20px">
 
+            <img src="/imgs/split-pic-1.png" class="w-full h-full object-cover" />
 
+          </ui-shadow-box>
 
+          <div v-for="item in 5" :key="item">
 
+            <ui-main-article></ui-main-article>
 
+            <div class="h-20px"></div>
 
+          </div>
 
+          <ui-shadow-box class="w-full h-100px mb-20px">
 
+            <img src="/imgs/split-pic-2.png" class="w-full h-full object-cover" />
 
+          </ui-shadow-box>
 
+          <div v-for="item in 5" :key="item">
 
+            <ui-main-article></ui-main-article>
 
+            <div class="h-20px"></div>
 
+          </div>
 
+        </div>
 
+        <div class="right w-320px">
 
+          <div class="px-20px bg-white">
 
+            <div class="h-17px"></div>
 
+            <div class="relative inline-flex mb-6.5px">
 
+              <img src="/imgs/hot.png" class="w-24px h-auto mr-4px" />
 
+              <div class="font-thin text-[#000] text-size-20px">{{ $t("热榜文章") }}</div>
 
+
 
+              <div
 
+                class="w-full h-3px absolute left-0 bottom-[-7.5px] bg-primary rounded-full"
 
+              ></div>
 
+            </div>
 
+            <ui-devider></ui-devider>
 
+            <div class="h-21px"></div>
 
+            <ui-swiper
 
+              class="mb-20px"
 
+              :items="[
 
+                { url: '/imgs/article_cover1.png', title: '这是标题' },
 
+              { url: '/imgs/article_cover1.png', title: '这是标题' },
 
+              ]"
 
+              titleClass="swiper-title"
 
+            ></ui-swiper>
 
+            <ui-devider></ui-devider>
 
+
 
+            <div v-for="item in 9" :key="item">
 
+              <ui-small-article></ui-small-article>
 
+              <ui-devider></ui-devider>
 
+            </div>
 
+          </div>
 
+          <div class="h-20px"></div>
 
+          <div class="px-20px bg-white">
 
+            <div class="h-17px"></div>
 
+            <div class="relative flex mb-6.5px justify-between item-center">
 
+              <div class="inline-flex">
 
+                <img src="/imgs/vip.png" class="w-24px h-auto mr-4px" />
 
+                <div class="font-thin text-[#000] text-size-20px">
 
+                  {{ $t("VIP期刊") }}
 
+                </div>
 
+              </div>
 
+              <el-button
 
+                type="text"
 
+                class="!p-0 !text-size-14px !font-normal !text-[#686868]"
 
+                >查看更多</el-button
 
+              >
 
+
 
+              <div
 
+                class="w-full h-3px absolute left-0 bottom-[-7.5px] bg-primary rounded-full"
 
+              ></div>
 
+            </div>
 
+            <ui-devider></ui-devider>
 
+            <div class="h-21px"></div>
 
+
 
+            <ui-swiper
 
+              class="mb-20px"
 
+              :items="[
 
+                { url: 'imgs/article_cover1.png', title: '这是标题' },
 
+                { url: 'imgs/article_cover1.png', title: '这是标题' },
 
+              ]"
 
+              titleClass="swiper-title"
 
+            ></ui-swiper>
 
+            <ui-swiper
 
+              class="mb-20px"
 
+              :items="[
 
+                { url: 'imgs/article_cover1.png', title: '这是标题' },
 
+                { url: 'imgs/article_cover1.png', title: '这是标题' },
 
+              ]"
 
+              titleClass="swiper-title"
 
+            ></ui-swiper>
 
+            <ui-devider></ui-devider>
 
+            <div v-for="item in 10" :key="item">
 
+              <ui-vip-article></ui-vip-article>
 
+              <ui-devider></ui-devider>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  data() {
 
+    return {
 
+      banner1: [
 
+        { url: "/imgs/banner1.png", title: "這裏是輪播圖推薦內容標題" },
 
+        { url: "/imgs/banner1.png", title: "這裏是輪播圖推薦內容標題" },
 
+        { url: "/imgs/banner1.png", title: "這裏是輪播圖推薦內容標題" },
 
+        { url: "/imgs/banner1.png", title: "這裏是輪播圖推薦內容標題" },
 
+        { url: "/imgs/banner1.png", title: "這裏是輪播圖推薦內容標題" },
 
+      ],
 
+    };
 
+  },
 
+};
 
+</script>
 
+<style>
 
+.swiper-group {
 
+  display: grid;
 
+  grid-template-columns: repeat(2, 290px);
 
+  grid-template-rows: repeat(2, 163px);
 
+  grid-gap: 10px;
 
+}
 
+.swiper {
 
+  @apply w-290px;
 
+
 
+  /* align-items: end; */
 
+  /* @apply w-290px h-163px; */
 
+}
 
+.swiper-title {
 
+  @apply bottom-17px left-17px text-size-16px;
 
+}
 
+</style>

src/pages/search/search.vue → src/h5/pages/search/search.vue
Zobraziť súbor


+ 143 - 0
src/h5/pages/specific-article/specific-article.vue
Zobraziť súbor 

@@ -0,0 +1,143 @@
 
+<template>
 
+  <div>
 
+    <div class="w-1200px m-auto mt-20px">
 
+      <div class="flex justify-between">
 
+        <div class="left w-860px">
 
+          <ui-shadow-box class="relative h-50px flex items-center pl-16.5px ">
 
+            <div
 
+              class="w-80px h-3px absolute left-0 top--3px bg-primary rounded-full"
 
+            ></div>
 
+
 
+            <div class="font-thin text-[#000] text-size-20px">{{ $t("军事") }}</div>
 
+          </ui-shadow-box>
 
+          <div class="h-20px"></div>
 
+          <div v-for="item in 5" :key="item">
 
+            <ui-main-article></ui-main-article>
 
+            <div class="h-20px"></div>
 
+          </div>
 
+          <ui-shadow-box class="w-full h-100px mb-20px">
 
+            <img src="/imgs/split-pic-1.png" class="w-full h-full object-cover" />
 
+          </ui-shadow-box>
 
+          <div v-for="item in 5" :key="item">
 
+            <ui-main-article></ui-main-article>
 
+            <div class="h-20px"></div>
 
+          </div>
 
+          <ui-shadow-box class="w-full h-100px mb-20px">
 
+            <img src="/imgs/split-pic-2.png" class="w-full h-full object-cover" />
 
+          </ui-shadow-box>
 
+          <div v-for="item in 5" :key="item">
 
+            <ui-main-article></ui-main-article>
 
+            <div class="h-20px"></div>
 
+          </div>
 
+        </div>
 
+        <div class="right w-320px">
 
+          <div class="px-20px bg-white">
 
+            <div class="h-17px"></div>
 
+            <div class="relative inline-flex mb-6.5px">
 
+              <img src="/imgs/hot.png" class="w-24px h-auto mr-4px" />
 
+              <div class="font-thin text-[#000] text-size-20px">{{ $t("热榜文章") }}</div>
 
+
 
+              <div
 
+                class="w-full h-3px absolute left-0 bottom-[-7.5px] bg-primary rounded-full"
 
+              ></div>
 
+            </div>
 
+            <ui-devider></ui-devider>
 
+            <div class="h-21px"></div>
 
+            <ui-swiper
 
+              class="mb-20px"
 
+              :items="[
 
+                { url: '/imgs/article_cover1.png', title: '这是标题' },
 
+              { url: '/imgs/article_cover1.png', title: '这是标题' },
 
+              ]"
 
+              titleClass="swiper-title"
 
+            ></ui-swiper>
 
+            <ui-devider></ui-devider>
 
+
 
+            <div v-for="item in 9" :key="item">
 
+              <ui-small-article></ui-small-article>
 
+              <ui-devider></ui-devider>
 
+            </div>
 
+          </div>
 
+          <div class="h-20px"></div>
 
+          <div class="px-20px bg-white">
 
+            <div class="h-17px"></div>
 
+            <div class="relative flex mb-6.5px justify-between item-center">
 
+              <div class="inline-flex">
 
+                <img src="/imgs/vip.png" class="w-24px h-auto mr-4px" />
 
+                <div class="font-thin text-[#000] text-size-20px">
 
+                  {{ $t("VIP期刊") }}
 
+                </div>
 
+              </div>
 
+              <el-button
 
+                type="text"
 
+                class="!p-0 !text-size-14px !font-normal !text-[#686868]"
 
+                >查看更多</el-button
 
+              >
 
+
 
+              <div
 
+                class="w-full h-3px absolute left-0 bottom-[-7.5px] bg-primary rounded-full"
 
+              ></div>
 
+            </div>
 
+            <ui-devider></ui-devider>
 
+            <div class="h-21px"></div>
 
+
 
+            <ui-swiper
 
+              class="mb-20px"
 
+              :items="[
 
+                { url: 'imgs/article_cover1.png', title: '这是标题' },
 
+                { url: 'imgs/article_cover1.png', title: '这是标题' },
 
+              ]"
 
+              titleClass="swiper-title"
 
+            ></ui-swiper>
 
+            <ui-swiper
 
+              class="mb-20px"
 
+              :items="[
 
+                { url: 'imgs/article_cover1.png', title: '这是标题' },
 
+                { url: 'imgs/article_cover1.png', title: '这是标题' },
 
+              ]"
 
+              titleClass="swiper-title"
 
+            ></ui-swiper>
 
+            <ui-devider></ui-devider>
 
+            <div v-for="item in 10" :key="item">
 
+              <ui-vip-article></ui-vip-article>
 
+              <ui-devider></ui-devider>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  data() {
 
+    return {
 
+      banner1: [
 
+        { url: "/imgs/banner1.png", title: "這裏是輪播圖推薦內容標題" },
 
+        { url: "/imgs/banner1.png", title: "這裏是輪播圖推薦內容標題" },
 
+        { url: "/imgs/banner1.png", title: "這裏是輪播圖推薦內容標題" },
 
+        { url: "/imgs/banner1.png", title: "這裏是輪播圖推薦內容標題" },
 
+        { url: "/imgs/banner1.png", title: "這裏是輪播圖推薦內容標題" },
 
+      ],
 
+    };
 
+  },
 
+};
 
+</script>
 
+<style>
 
+.swiper-group {
 
+  display: grid;
 
+  grid-template-columns: repeat(2, 290px);
 
+  grid-template-rows: repeat(2, 163px);
 
+  grid-gap: 10px;
 
+}
 
+.swiper {
 
+  @apply w-290px;
 
+
 
+  /* align-items: end; */
 
+  /* @apply w-290px h-163px; */
 
+}
 
+.swiper-title {
 
+  @apply bottom-17px left-17px text-size-16px;
 
+}
 
+</style>

src/pages/user/_components/user-account-setting-info-item.vue → src/h5/pages/user/_components/user-account-setting-info-item.vue
Zobraziť súbor


+ 71 - 0
src/h5/pages/user/user-account-setting.vue
Zobraziť súbor 

@@ -0,0 +1,71 @@
 
+<template>
 
+  <div class="account-setting">
 
+    <div class="h-27px"></div>
 
+    <ui-title-devider :title="$t('账号设置')"></ui-title-devider>
 
+    <div class="h-14px"></div>
 
+    <user-account-setting-info-item label="头像">
 
+      <div class="pl-20px">
 
+        <img src="/imgs/avatar.png" class="w-80px h-80px" />
 
+      </div>
 
+    </user-account-setting-info-item>
 
+    <user-account-setting-info-item
 
+      label="昵称"
 
+      text="cyt"
 
+    ></user-account-setting-info-item>
 
+    <user-account-setting-info-item
 
+      label="账号"
 
+      text="15486323563@qq.com"
 
+    ></user-account-setting-info-item>
 
+    <user-account-setting-info-item label="密码">
 
+      <div class="pl-20px flex items-center">
 
+        <div class="mr-50px">*********</div>
 
+        <div class="text-primary cursor-pointer">重置密码</div>
 
+      </div>
 
+    </user-account-setting-info-item>
 
+    <user-account-setting-info-item :required="true" label="姓名">
 
+      <ui-input v-model="name" class="!w-345px"></ui-input>
 
+    </user-account-setting-info-item>
 
+    <user-account-setting-info-item :required="true" label="电话">
 
+      <ui-input v-model="phone" class="!w-345px">
 
+        <div slot="suffix" class="flex items-center h-full">
 
+          <div class="text-black">+86</div>
 
+          <div class="w-12px"></div>
 
+          <img src="/imgs/menu-arrow.png" class="w-6px h-auto" />
 
+          <div class="w-16px"></div>
 
+        </div> </ui-input
 
+    ></user-account-setting-info-item>
 
+    <user-account-setting-info-item  :required="true" label="性别">
 
+      <el-radio-group v-model="gender">
 
+        <el-radio :label="0">女</el-radio>
 
+        <el-radio :label="1">男</el-radio>
 
+      </el-radio-group>
 
+    </user-account-setting-info-item>
 
+    <user-account-setting-info-item label="职业">
 
+      <ui-input v-model="job" class="!w-728px"></ui-input>
 
+    </user-account-setting-info-item>
 
+    <user-account-setting-info-item label="工作单位">
 
+      <ui-input v-model="jobUnit" class="!w-728px"></ui-input>
 
+    </user-account-setting-info-item>
 
+    <user-account-setting-info-item label="地址">
 
+      <ui-input v-model="addr" class="!w-728px"></ui-input>
 
+    </user-account-setting-info-item>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+
 
+export default {
 
+    data(){
 
+        return {
 
+            gender: 0,
 
+            name: "陈小婷",
 
+            phone: "18926145678",
 
+            job: "产品经理",
 
+            jobUnit: "广州量子互联科技有限公司",
 
+            addr: "广州市黄埔区联和街道黄埔科学大道112号绿地广场1710室"
 
+        }
 
+    }
 
+};
 
+</script>
 
+
 
+<style></style>

src/pages/user/user-collection.vue → src/h5/pages/user/user-collection.vue
Zobraziť súbor


src/pages/user/user-comment.vue → src/h5/pages/user/user-comment.vue
Zobraziť súbor


src/pages/user/user-history.vue → src/h5/pages/user/user-history.vue
Zobraziť súbor


src/pages/user/user-like.vue → src/h5/pages/user/user-like.vue
Zobraziť súbor


src/pages/user/user-order.vue → src/h5/pages/user/user-order.vue
Zobraziť súbor


src/pages/user/user-personal-center.vue → src/h5/pages/user/user-personal-center.vue
Zobraziť súbor


src/pages/user/user-subscription.vue → src/h5/pages/user/user-subscription.vue
Zobraziť súbor


+ 34 - 0
src/h5/pages/vip/vip.vue
Zobraziť súbor 

@@ -0,0 +1,34 @@
 
+<template>
 
+  <div class="w-1200px">
 
+    <ui-shadow-box class="bg-white h-50px mt-30px flex items-center">
 
+      <div
 
+        class="w-100px h-full bg-primary bg-opacity-26 rounded-3px flex justify-center items-center"
 
+      >
 
+        年份
 
+      </div>
 
+      <div :class="`year-tag ${index === 0}` " v-for="(item,index) in 13" :key="index">{{2022 - index}}</div>
 
+      <img src="/imgs/year-arrow-down.png" class="w-16px h-auto ml-20px cursor-pointer"/>
 
+    </ui-shadow-box>
 
+    <div class="w-full flex flex-wrap justify-between">
 
+      <ui-shadow-box
 
+        v-for="item in 21"
 
+        :key="item"
 
+        class="px-50px pt-30px mt-40px w-390px h-221px"
 
+      >
 
+        <ui-vip-article class="transform scale-110"></ui-vip-article>
 
+      </ui-shadow-box>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {};
 
+</script>
 
+<style>
 
+.year-tag {
 
+  @apply w-60px h-24px bg-[#F7F7F7] flex items-center justify-center rounded-full ml-20px cursor-pointer;
 
+}
 
+.year-tag.selected {
 
+  @apply bg-primary ;
 
+}
 
+</style>

+ 91 - 0
src/h5/router/index.ts
Zobraziť súbor 

@@ -0,0 +1,91 @@
 
+import Vue from "vue";
 
+import type { RouteConfig } from "vue-router";
 
+import VueRouter from "vue-router";
 
+import Home from "@pc/pages/home/home.vue";
 
+import Recommend from "@pc/pages/recommend/recommend.vue";
 
+import RealtimeNews from "@pc/pages/realtime-news/realtime-news.vue";
 
+import ArticleDetail from "@pc/pages/article-detail/article-detail.vue";
 
+import BasicLayout from "@pc/components/layout-basic/layout-basic.vue";
 
+import UserLayout from "@pc/components/layout-user/layout-user.vue";
 
+import UserPersonalCenter from "@pc/pages/user/user-personal-center.vue";
 
+import UserAccountSetting from "@pc/pages/user/user-account-setting.vue";
 
+import UserOrder from "@pc/pages/user/user-order.vue";
 
+import Like from "@pc/pages/user/user-like.vue";
 
+import Comment from "@pc/pages/user/user-comment.vue";
 
+import Collection from "@pc/pages/user/user-collection.vue";
 
+import History from "@pc/pages/user/user-history.vue";
 
+import Subscription from "@pc/pages/user/user-subscription.vue";
 
+import Login from "@pc/pages/auth/login.vue";
 
+import ChangePass from "@pc/pages/auth/change-password.vue";
 
+import ProfileComplete from "@pc/pages/auth/profile-complete.vue";
 
+import ProductDetail from "@pc/pages/product/product-detail.vue";
 
+import OrderDetail from "@pc/pages/product/order-detail.vue";
 
+import SpecificArticle from "@pc/pages/specific-article/specific-article.vue";
 
+import Vip from "@pc/pages/vip/vip.vue";
 
+import Search from "@pc/pages/search/search.vue";
 
+import Aboutus from "@pc/pages/aboutus/aboutus.vue";
 
+import Publish from "@pc/pages/publish/publish.vue";
 
+
 
+Vue.use(VueRouter);
 
+
 
+export const routes: RouteConfig[] = [
 
+  {
 
+    path: "/",
 
+    name: "root",
 
+    redirect:'/login',
 
+    // NOTE: you can also apply meta information
 
+    // meta: {authRequired: false }
 
+    component: BasicLayout,
 
+    children: [
 
+      { path: "/login", component: Login },
 
+      { path: "/home", component: Home },
 
+      { path: "/recommend", component: Recommend },
 
+      { path: "/realtime-news", component: RealtimeNews },
 
+      { path: "/change-pass", component: ChangePass },
 
+      { path: "/profile-complete", component: ProfileComplete },
 
+      { path: "/article-detail", component: ArticleDetail },
 
+      { path: "/product-detail", component: ProductDetail },
 
+      { path: "/order-detail", component: OrderDetail },
 
+      { path: "/specific-article", component: SpecificArticle },
 
+      { path: "/vip", component: Vip },
 
+      { path: "/search", component: Search },
 
+      { path: "/aboutus", component: Aboutus },
 
+      { path: "/publish", component: Publish },
 
+      {
 
+        path: "/user",
 
+        name: "user",
 
+        // NOTE: you can also apply meta information
 
+        // meta: {authRequired: false }
 
+        component: UserLayout,
 
+        children: [
 
+          { path: "personal-center", component: UserPersonalCenter },
 
+          { path: "account-setting", component: UserAccountSetting },
 
+          { path: "order", component: UserOrder },
 
+          { path: "collection", component: Collection },
 
+          { path: "subscription", component: Subscription },
 
+          { path: "like", component: Like },
 
+          { path: "comment", component: Comment },
 
+          { path: "history", component: History },
 
+        ],
 
+        // NOTE: you can also lazy-load the component
 
+        // component: () => import("@pc/views/About.vue")
 
+      },
 
+    ],
 
+    // NOTE: you can also lazy-load the component
 
+    // component: () => import("@pc/views/About.vue")
 
+  },
 
+
 
+  {
 
+    path: "/:path(.*)",
 
+    name: "NotFound",
 
+    // component: NotFound,
 
+  },
 
+];
 
+
 
+const router = new VueRouter({
 
+  base: "/",
 
+  mode: "hash",
 
+  routes,
 
+});
 
+
 
+export default router;

src/shims-tsx.d.ts → src/h5/shims-tsx.d.ts
Zobraziť súbor


src/shims-vue.d.ts → src/h5/shims-vue.d.ts
Zobraziť súbor


+ 0 - 3
src/locales/zh-TW.js
Zobraziť súbor 

@@ -1,3 +0,0 @@
 
-export default {
 
-    "搜索": "搜索繁体"
 
-}

+ 11 - 0
src/pc/App.vue
Zobraziť súbor 

@@ -0,0 +1,11 @@
 
+<template>
 
+  <div id="app">
 
+    <!-- <div style="width: 960px; backgroundcolor: black">12</div> -->
 
+    <RouterView />
 
+  </div>
 
+</template>
 
+<style>
 
+body {
 
+  @apply bg-[#F7F7F7];
 
+}
 
+</style>

BIN
src/pc/assets/css/fonts/element-icons.ttf
Zobraziť súbor


BIN
src/pc/assets/css/fonts/element-icons.woff
Zobraziť súbor


Rozdielové dáta súboru neboli zobrazené, pretože súbor je príliš veľký
+ 1 - 0
src/pc/assets/css/index.css


Rozdielové dáta súboru neboli zobrazené, pretože súbor je príliš veľký
+ 1 - 0
src/pc/assets/not-found.svg


Rozdielové dáta súboru neboli zobrazené, pretože súbor je príliš veľký
+ 15 - 0
src/pc/assets/vite-logo.svg


+ 2 - 0
src/pc/assets/vue-logo.svg
Zobraziť súbor 

@@ -0,0 +1,2 @@
 
+<?xml version="1.0" encoding="UTF-8"?>
 
+<svg version="1.1" viewBox="0 0 261.76 226.69" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34)"><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-75.491l98.16-170.02 98.16 170.02z" fill="#41b883"/></g><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-36.227l58.896-102.01 58.896 102.01z" fill="#34495e"/></g></g></svg>

+ 203 - 0
src/pc/auto-imports.d.ts
Zobraziť súbor 

@@ -0,0 +1,203 @@
 
+// Generated by 'unplugin-auto-import'
 
+export {}
 
+declare global {
 
+  const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
 
+  const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
 
+  const computedAsync: typeof import('@vueuse/core')['computedAsync']
 
+  const computedEager: typeof import('@vueuse/core')['computedEager']
 
+  const computedInject: typeof import('@vueuse/core')['computedInject']
 
+  const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
 
+  const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
 
+  const controlledRef: typeof import('@vueuse/core')['controlledRef']
 
+  const createEventHook: typeof import('@vueuse/core')['createEventHook']
 
+  const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
 
+  const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
 
+  const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
 
+  const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
 
+  const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
 
+  const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
 
+  const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
 
+  const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
 
+  const extendRef: typeof import('@vueuse/core')['extendRef']
 
+  const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
 
+  const isDefined: typeof import('@vueuse/core')['isDefined']
 
+  const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
 
+  const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
 
+  const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
 
+  const onLongPress: typeof import('@vueuse/core')['onLongPress']
 
+  const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
 
+  const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
 
+  const reactify: typeof import('@vueuse/core')['reactify']
 
+  const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
 
+  const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
 
+  const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
 
+  const reactivePick: typeof import('@vueuse/core')['reactivePick']
 
+  const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
 
+  const refDebounced: typeof import('@vueuse/core')['refDebounced']
 
+  const refDefault: typeof import('@vueuse/core')['refDefault']
 
+  const refThrottled: typeof import('@vueuse/core')['refThrottled']
 
+  const refWithControl: typeof import('@vueuse/core')['refWithControl']
 
+  const resolveRef: typeof import('@vueuse/core')['resolveRef']
 
+  const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
 
+  const syncRef: typeof import('@vueuse/core')['syncRef']
 
+  const syncRefs: typeof import('@vueuse/core')['syncRefs']
 
+  const templateRef: typeof import('@vueuse/core')['templateRef']
 
+  const throttledRef: typeof import('@vueuse/core')['throttledRef']
 
+  const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
 
+  const toReactive: typeof import('@vueuse/core')['toReactive']
 
+  const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
 
+  const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
 
+  const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
 
+  const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
 
+  const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
 
+  const unrefElement: typeof import('@vueuse/core')['unrefElement']
 
+  const until: typeof import('@vueuse/core')['until']
 
+  const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
 
+  const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
 
+  const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
 
+  const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
 
+  const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
 
+  const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
 
+  const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
 
+  const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
 
+  const useArraySome: typeof import('@vueuse/core')['useArraySome']
 
+  const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
 
+  const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
 
+  const useBase64: typeof import('@vueuse/core')['useBase64']
 
+  const useBattery: typeof import('@vueuse/core')['useBattery']
 
+  const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
 
+  const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
 
+  const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
 
+  const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
 
+  const useCached: typeof import('@vueuse/core')['useCached']
 
+  const useClipboard: typeof import('@vueuse/core')['useClipboard']
 
+  const useColorMode: typeof import('@vueuse/core')['useColorMode']
 
+  const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
 
+  const useCounter: typeof import('@vueuse/core')['useCounter']
 
+  const useCssVar: typeof import('@vueuse/core')['useCssVar']
 
+  const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
 
+  const useCycleList: typeof import('@vueuse/core')['useCycleList']
 
+  const useDark: typeof import('@vueuse/core')['useDark']
 
+  const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
 
+  const useDebounce: typeof import('@vueuse/core')['useDebounce']
 
+  const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
 
+  const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
 
+  const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
 
+  const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
 
+  const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
 
+  const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
 
+  const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
 
+  const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
 
+  const useDraggable: typeof import('@vueuse/core')['useDraggable']
 
+  const useDropZone: typeof import('@vueuse/core')['useDropZone']
 
+  const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
 
+  const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
 
+  const useElementHover: typeof import('@vueuse/core')['useElementHover']
 
+  const useElementSize: typeof import('@vueuse/core')['useElementSize']
 
+  const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
 
+  const useEventBus: typeof import('@vueuse/core')['useEventBus']
 
+  const useEventListener: typeof import('@vueuse/core')['useEventListener']
 
+  const useEventSource: typeof import('@vueuse/core')['useEventSource']
 
+  const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
 
+  const useFavicon: typeof import('@vueuse/core')['useFavicon']
 
+  const useFetch: typeof import('@vueuse/core')['useFetch']
 
+  const useFileDialog: typeof import('@vueuse/core')['useFileDialog']
 
+  const useFileSystemAccess: typeof import('@vueuse/core')['useFileSystemAccess']
 
+  const useFocus: typeof import('@vueuse/core')['useFocus']
 
+  const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
 
+  const useFps: typeof import('@vueuse/core')['useFps']
 
+  const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
 
+  const useGamepad: typeof import('@vueuse/core')['useGamepad']
 
+  const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
 
+  const useIdle: typeof import('@vueuse/core')['useIdle']
 
+  const useImage: typeof import('@vueuse/core')['useImage']
 
+  const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
 
+  const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
 
+  const useInterval: typeof import('@vueuse/core')['useInterval']
 
+  const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
 
+  const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
 
+  const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
 
+  const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
 
+  const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
 
+  const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
 
+  const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
 
+  const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
 
+  const useMemoize: typeof import('@vueuse/core')['useMemoize']
 
+  const useMemory: typeof import('@vueuse/core')['useMemory']
 
+  const useMounted: typeof import('@vueuse/core')['useMounted']
 
+  const useMouse: typeof import('@vueuse/core')['useMouse']
 
+  const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
 
+  const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
 
+  const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
 
+  const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
 
+  const useNetwork: typeof import('@vueuse/core')['useNetwork']
 
+  const useNow: typeof import('@vueuse/core')['useNow']
 
+  const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
 
+  const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
 
+  const useOnline: typeof import('@vueuse/core')['useOnline']
 
+  const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
 
+  const useParallax: typeof import('@vueuse/core')['useParallax']
 
+  const usePermission: typeof import('@vueuse/core')['usePermission']
 
+  const usePointer: typeof import('@vueuse/core')['usePointer']
 
+  const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
 
+  const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
 
+  const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
 
+  const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
 
+  const useRafFn: typeof import('@vueuse/core')['useRafFn']
 
+  const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
 
+  const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
 
+  const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
 
+  const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
 
+  const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
 
+  const useScroll: typeof import('@vueuse/core')['useScroll']
 
+  const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
 
+  const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
 
+  const useShare: typeof import('@vueuse/core')['useShare']
 
+  const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
 
+  const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
 
+  const useStepper: typeof import('@vueuse/core')['useStepper']
 
+  const useStorage: typeof import('@vueuse/core')['useStorage']
 
+  const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
 
+  const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
 
+  const useSupported: typeof import('@vueuse/core')['useSupported']
 
+  const useSwipe: typeof import('@vueuse/core')['useSwipe']
 
+  const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
 
+  const useTextDirection: typeof import('@vueuse/core')['useTextDirection']
 
+  const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
 
+  const useTextareaAutosize: typeof import('@vueuse/core')['useTextareaAutosize']
 
+  const useThrottle: typeof import('@vueuse/core')['useThrottle']
 
+  const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
 
+  const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
 
+  const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
 
+  const useTimeout: typeof import('@vueuse/core')['useTimeout']
 
+  const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
 
+  const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll']
 
+  const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
 
+  const useTitle: typeof import('@vueuse/core')['useTitle']
 
+  const useToggle: typeof import('@vueuse/core')['useToggle']
 
+  const useTransition: typeof import('@vueuse/core')['useTransition']
 
+  const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
 
+  const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
 
+  const useVModel: typeof import('@vueuse/core')['useVModel']
 
+  const useVModels: typeof import('@vueuse/core')['useVModels']
 
+  const useVibrate: typeof import('@vueuse/core')['useVibrate']
 
+  const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
 
+  const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
 
+  const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
 
+  const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
 
+  const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
 
+  const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
 
+  const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
 
+  const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
 
+  const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
 
+  const watchArray: typeof import('@vueuse/core')['watchArray']
 
+  const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
 
+  const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
 
+  const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
 
+  const watchOnce: typeof import('@vueuse/core')['watchOnce']
 
+  const watchPausable: typeof import('@vueuse/core')['watchPausable']
 
+  const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
 
+  const watchTriggerable: typeof import('@vueuse/core')['watchTriggerable']
 
+  const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
 
+  const whenever: typeof import('@vueuse/core')['whenever']
 
+}

+ 36 - 0
src/pc/components.d.ts
Zobraziť súbor 

@@ -0,0 +1,36 @@
 
+// generated by unplugin-vue-components
 
+// We suggest you to commit this file into source control
 
+// Read more: https://github.com/vuejs/core/pull/3399
 
+import '@vue/runtime-core'
 
+
 
+export {}
 
+
 
+declare module '@vue/runtime-core' {
 
+  export interface GlobalComponents {
 
+    Feature: typeof import('./components/Feature.vue')['default']
 
+    Features: typeof import('./components/Features.vue')['default']
 
+    Hero: typeof import('./components/Hero.vue')['default']
 
+    HomeNew: typeof import('./pages/home/_components/home-new.vue')['default']
 
+    HomeTags: typeof import('./pages/home/_components/home-tags.vue')['default']
 
+    LayoutBasic: typeof import('./components/layout-basic/layout-basic.vue')['default']
 
+    LayoutUser: typeof import('./components/layout-user/layout-user.vue')['default']
 
+    LayoutUserHeader: typeof import('./components/layout-user/layout-user-header.vue')['default']
 
+    LayoutUserMenu: typeof import('./components/layout-user/layout-user-menu.vue')['default']
 
+    Navbar: typeof import('./components/Navbar.vue')['default']
 
+    RouterLink: typeof import('vue-router')['RouterLink']
 
+    RouterView: typeof import('vue-router')['RouterView']
 
+    UiDevider: typeof import('./components/ui-devider/ui-devider.vue')['default']
 
+    UiInput: typeof import('./components/ui-input/ui-input.vue')['default']
 
+    UiMainArticle: typeof import('./components/ui-main-article/ui-main-article.vue')['default']
 
+    UiNavBar: typeof import('./components/ui-nav-bar/ui-nav-bar.vue')['default']
 
+    UiOrderTable: typeof import('./components/ui-order-table/ui-order-table.vue')['default']
 
+    UiPortal: typeof import('./components/ui-portal/ui-portal.vue')['default']
 
+    UiShadowBox: typeof import('./components/ui-shadow-box/ui-shadow-box.vue')['default']
 
+    UiSmallArticle: typeof import('./components/ui-small-article/ui-small-article.vue')['default']
 
+    UiSwiper: typeof import('./components/ui-swiper/ui-swiper.vue')['default']
 
+    UiTitleDevider: typeof import('./components/ui-title-devider/ui-title-devider.vue')['default']
 
+    UiVipArticle: typeof import('./components/ui-vip-article/ui-vip-article.vue')['default']
 
+    UiVipPreset: typeof import('./components/ui-vip-preset/ui-vip-preset.vue')['default']
 
+    UserAccountSettingInfoItem: typeof import('./pages/user/_components/user-account-setting-info-item.vue')['default']
 
+  }
 
+}

+ 31 - 0
src/pc/components/Feature.vue
Zobraziť súbor 

@@ -0,0 +1,31 @@
 
+<script setup lang="ts">
 
+defineProps({
 
+  title: { type: String, required: true },
 
+  text: { type: String, required: true },
 
+  url: { type: String, required: true },
 
+})
 
+</script>
 
+
 
+<template>
 
+  <div
 
+    class="flex flex-col h-full p-8 bg-gray-100 rounded-lg items dark:bg-gray-700"
 
+  >
 
+    <Heading2>
 
+      {{ title }}
 
+    </Heading2>
 
+
 
+    <div class="flex flex-col flex-grow">
 
+      <p class="flex-grow text-base leading-relaxed dark:text-gray-300">
 
+        {{ text }}
 
+      </p>
 
+      <a
 
+        :href="url"
 
+        target="_blank"
 
+        class="inline-flex items-center mt-3 text-green-500"
 
+      >
 
+        Learn More
 
+        <MdiArrowRight class="ml-1" />
 
+      </a>
 
+    </div>
 
+  </div>
 
+</template>

+ 54 - 0
src/pc/components/Features.vue
Zobraziť súbor 

@@ -0,0 +1,54 @@
 
+<template>
 
+  <section class="container px-5 py-12 mx-auto text-gray-600 body-font">
 
+    <div class="flex flex-col w-full mb-8 text-center">
 
+      <Heading1> Installed Vite plugins 📦 </Heading1>
 
+      <p class="dark:text-gray-300">
 
+        You can even find more awesome Vite plugins
 
+        <a
 
+          href="https://github.com/vitejs/awesome-vite"
 
+          target="_blank"
 
+          class="text-green-500"
 
+        >
 
+          here
 
+        </a>
 
+      </p>
 
+    </div>
 
+    <div class="flex flex-wrap -m-2">
 
+      <div class="w-full p-2 md:w-1/2 lg:w-1/3">
 
+        <Feature
 
+          title="⚡️ @vitejs/plugin-vue2"
 
+          text="Vue 2 support for Vite"
 
+          url="https://github.com/vitejs/vite-plugin-vue2"
 
+        />
 
+      </div>
 
+      <div class="w-full p-2 md:w-1/2 lg:w-1/3">
 
+        <Feature
 
+          title="📦 unplugin-components"
 
+          text="Importing Vue components on-demand"
 
+          url="https://github.com/antfu/unplugin-vue-components"
 
+        />
 
+      </div>
 
+      <div class="w-full p-2 md:w-1/2 lg:w-1/3">
 
+        <Feature
 
+          title="📥 unplugin-auto-import"
 
+          text="Importing APIs like CompositionAPI on-demand"
 
+          url="https://github.com/antfu/unplugin-auto-import"
 
+        />
 
+      </div>
 
+      <div class="w-full p-2 md:w-1/2 lg:w-1/3">
 
+        <Feature
 
+          title="🎨 vite-plugin-windicss"
 
+          text="Easy WindiCSS integration"
 
+          url="https://github.com/windicss/vite-plugin-windicss"
 
+        />
 
+      </div>
 
+      <div class="w-full p-2 md:w-1/2 lg:w-1/3">
 
+        <Feature
 
+          title="😃 unplugin-icons"
 
+          text="Importing icons as Vue components on-demand"
 
+          url="https://github.com/antfu/unplugin-icons"
 
+        />
 
+      </div>
 
+    </div>
 
+  </section>
 
+</template>

+ 25 - 0
src/pc/components/Hero.vue
Zobraziť súbor 

@@ -0,0 +1,25 @@
 
+<template>
 
+  <section
 
+    class="container flex flex-col items-center px-5 py-12 mx-auto text-gray-600 body-font md:flex-row"
 
+  >
 
+    <div class="w-5/6 mb-10 lg:max-w-lg lg:w-full md:w-1/2 md:mb-0">
 
+      <img
 
+        class="object-cover object-center rounded"
 
+        alt="Vue logo"
 
+        src="@/assets/vue-logo.svg"
 
+      >
 
+    </div>
 
+    <div
 
+      class="flex flex-col items-center text-center lg:flex-grow md:w-1/2 lg:pl-24 md:pl-16 md:items-start md:text-left"
 
+    >
 
+      <Heading1> Vite ⚡ - Vue 2 starter template </Heading1>
 
+      <p class="mb-8 leading-relaxed dark:text-gray-300">
 
+        This example project shows how to speed up your Vue 2 application with
 
+        the next generation frontend tooling Vite.
 
+      </p>
 
+      <a href="https://vuejs.org/v2/guide/" target="_blank">
 
+        <ButtonPrimary> Vue docs </ButtonPrimary>
 
+      </a>
 
+    </div>
 
+  </section>
 
+</template>

+ 69 - 0
src/pc/components/Navbar.vue
Zobraziť súbor 

@@ -0,0 +1,69 @@
 
+<script setup lang="ts">
 
+import { computed, getCurrentInstance } from 'vue'
 
+import { routes } from '@/router'
 
+
 
+// Import config from .env
 
+const appName = import.meta.env.VITE_APP_NAME
 
+
 
+const availableRoutes = routes.filter(route => route.name !== 'NotFound')
 
+const currentRoute = computed(() => getCurrentInstance()?.proxy?.$route)
 
+
 
+const isDark = useDark()
 
+const toggle = useToggle(isDark)
 
+</script>
 
+
 
+<template>
 
+  <header class="text-gray-600 body-font dark:bg-gray-800">
 
+    <div
 
+      class="container flex flex-col flex-wrap items-center p-5 mx-auto md:flex-row"
 
+    >
 
+      <RouterLink
 
+        :to="{ name: 'Home' }"
 
+        class="flex items-center mb-4 font-medium text-gray-900 title-font md:mb-0"
 
+      >
 
+        <img alt="Vite logo" src="@/assets/vite-logo.svg" width="36px">
 
+        <span class="ml-3 text-xl dark:text-white">
 
+          {{ appName }}
 
+        </span>
 
+      </RouterLink>
 
+      <nav
 
+        class="flex flex-wrap items-center justify-center text-base md:ml-auto"
 
+      >
 
+        <RouterLink
 
+          v-for="(route, index) in availableRoutes"
 
+          :key="index"
 
+          class="mr-5 font-semibold cursor-pointer"
 
+          :class="{
 
+            'text-green-500 hover:green-500 dark:text-green-500 dark:hover:text-green-500 underline':
 
+              route.name === currentRoute.name,
 
+            'hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200':
 
+              route.name !== currentRoute.name,
 
+          }"
 
+          :to="{ name: route.name }"
 
+        >
 
+          {{ route.name }}
 
+        </RouterLink>
 
+        <RouterLink
 
+          class="flex items-center justify-center mr-2 text-black w-9 h-9 dark:text-white"
 
+          to="/aliens"
 
+        >
 
+          <MdiAlien />
 
+        </RouterLink>
 
+        <a
 
+          href="https://github.com/lstoeferle/vite-vue2-windicss-starter"
 
+          target="_blank"
 
+          class="flex items-center justify-center mr-2 text-black w-9 h-9 dark:text-white"
 
+        >
 
+          <MdiGithub />
 
+        </a>
 
+        <button
 
+          class="flex items-center justify-center w-9 h-9 focus:outline-none"
 
+          @click="toggle()"
 
+        >
 
+          <MdiWhiteBalanceSunny v-if="isDark" class="text-yellow-500" />
 
+          <MdiMoonWaningCrescent v-else class="text-gray-800" />
 
+        </button>
 
+      </nav>
 
+    </div>
 
+  </header>
 
+</template>

+ 54 - 0
src/pc/components/layout-basic/layout-basic.vue
Zobraziť súbor 

@@ -0,0 +1,54 @@
 
+<template>
 
+  <div class="w-screen flex flex-col items-center overflow-x-hidden">
 
+    <ui-nav-bar></ui-nav-bar>
 
+    <div class="min-h-1024px">
 
+      <RouterView />
 
+    </div>
 
+    <div class="h-70px"></div>
 
+    <div class="h-452px w-full bg-primary bg-opacity-95 relative">
 
+      <div class="w-1200px flex flex-col mx-auto">
 
+        <div class="h-1px bg-white w-full mt-32px"></div>
 
+        <div class="flex justify-between mt-30px">
 
+          <img src="/imgs/Linkedin.png" class="w-139px" />
 
+          <img src="/imgs/youtube.png" class="w-153px" />
 
+          <img src="/imgs/twitter.png" class="w-127px" />
 
+          <img src="/imgs/facebook.png" class="w-148px" />
 
+        </div>
 
+        <div class="h-1px bg-white w-full mt-27px"></div>
 
+        <div class="flex justify-between mt-42px">
 
+          <div class="w-139px">
 
+            <div class="text-white font-extralight text-size-20px">联系方式</div>
 
+          </div>
 
+          <div class="w-153px">
 
+            <div class="text-white font-extralight text-size-20px">联系方式</div>
 
+          </div>
 
+          <div class="w-127px">
 
+            <div class="text-white font-extralight text-size-20px">联系方式</div>
 
+            <div class="text-size-14px text-white">联系电话：18926171456</div>
 
+            <div class="text-size-14px text-white">邮箱：189261714@qq.com</div>
 
+          </div>
 
+          <div class="w-148px">
 
+            <img class="w-120px h-120px" src="/imgs/qrcode.png" />
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <div
 
+        class="bg-primary absolute w-full h-100px bottom-0 text-center text-white text-size-12px leading-24px flex justify-center items-center"
 
+      >
 
+        <div class="w-1200px">
 
+          特别声明：本站持有《出版物经营许可证》、《增值电信业务经营许可证》，主要从事杂志订阅与学术咨询，不是任何杂志官网，不涉及出版事务，特此申明。如有侵权，请立即联系我们网站，我们立即下架或删除。
 
+            工信部备案：蜀ICP备09010985号-11 
 
+          川公网安备：51092202000082 出版物经营许可证：射行审新出发2020字第011号 增值电信业务经营许可证：川B2-20170325 股权代码：102064
 
+          © 版权所有：四川博文网络科技有限责任公司 
 
+          本网违法和不良信息举报、“网络内容从业人员违法违规行为” 举报邮箱：2355902952@qq.com 举报电话：13378216660
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {};
 
+</script>
 
+
 
+<style lang="scss" scoped></style>

+ 37 - 0
src/pc/components/layout-user/layout-user-header.vue
Zobraziť súbor 

@@ -0,0 +1,37 @@
 
+<template>
 
+  <div
 
+    style="background: url('/imgs/personal_banner.png'); background-size: cover"
 
+    class="w-full h-220px relative"
 
+  >
 
+    <div
 
+      class="w-full h-full bg-[rgba(18, 64, 38, 1)] backdrop-filter backdrop-blur-md"
 
+    ></div>
 
+    <div class="flex items-center absolute bottom-0 right-0 left-0 top-0">
 
+      <div class="w-1200px m-auto flex items-center justify-between px-70px">
 
+        <div class="flex items-center">
 
+          <div
 
+            class="w-120px h-120px rounded-full border-white border-1px border-solid mr-20px"
 
+          >
 
+            <img src="/imgs/avatar.png" class="object-cover w-full h-full" />
 
+          </div>
 
+
 
+          <div>
 
+            <div class="text-size-20px text-white">cyt</div>
 
+            <div class="h-26px"></div>
 
+            <div class="text-size-16px text-white">2342342332@qq.com</div>
 
+          </div>
 
+        </div>
 
+        <div class="flex items-center">
 
+          <div class="text-white text-size-18px mr-19px">
 
+            {{ $t("当前为月会员,有效期至2022年9月28日") }}
 
+          </div>
 
+          <div
 
+            class="text-size-14px text-white w-80px h-30px bg-primary flex items-center justify-center rounded-full"
 
+          >
 
+            续 费
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+</template>

+ 108 - 0
src/pc/components/layout-user/layout-user-menu.vue
Zobraziť súbor 

@@ -0,0 +1,108 @@
 
+<template>
 
+  <div class="w-240px h-auto bg-white px-39px pt-76px">
 
+    <div
 
+      v-for="(menu, index) in menus"
 
+      :key="index"
 
+      class="flex items-center mb-57px cursor-pointer"
 
+      @click="$router.push(menu.route)"
 
+    >
 
+      <img
 
+        :src="currentMenuIndex === index ? menu.activeIcon : menu.icon"
 
+        class="w-30px h-30px object-contain mr-13px"
 
+      />
 
+      <div
 
+        :class="`text-size-20px ${
 
+          currentMenuIndex === index ? 'text-primary' : 'text-black'
 
+        } ${currentMenuIndex === index ? 'font-normal' : 'font-normal'}`"
 
+      >
 
+        {{ $t(menu.name) }}
 
+      </div>
 
+      <div class="flex flex-1 items-center justify-end">
 
+        <img
 
+          :src="
 
+            currentMenuIndex === index ? '/imgs/menu-arrow-1.png' : '/imgs/menu-arrow.png'
 
+          "
 
+          class="w-6px"
 
+        />
 
+      </div>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  watch: {
 
+    $route: function (next) {
 
+      console.log(next.path);
 
+      this.currentPath = next.path;
 
+    },
 
+  },
 
+  computed: {
 
+    currentMenuIndex: (vm) => vm.menus.findIndex((menu) => menu.route === vm.currentPath),
 
+  },
 
+  mounted() {
 
+    console.log("currentMenuIndex", this.currentMenuIndex);
 
+  },
 
+
 
+  data() {
 
+    return {
 
+      currentPath: this.$route.path,
 
+      menus: [
 
+        {
 
+          icon: "/imgs/user-personal.png",
 
+          activeIcon: "/imgs/user-personal-1.png",
 
+          name: "个人中心",
 
+          route: "/user/personal-center",
 
+        },
 
+        {
 
+          icon: "/imgs/user-setting.png",
 
+          activeIcon: "/imgs/user-setting-1.png",
 
+          name: "账号设置",
 
+          route: "/user/account-setting",
 
+        },
 
+        {
 
+          icon: "/imgs/user-order.png",
 
+          activeIcon: "/imgs/user-setting-1.png",
 
+          name: "我的订单",
 
+          route: "/user/order",
 
+        },
 
+        {
 
+          icon: "/imgs/user-collection.png",
 
+          activeIcon: "/imgs/user-collection-1.png",
 
+
 
+          name: "我的收藏",
 
+          route: "/user/collection",
 
+        },
 
+        {
 
+          icon: "/imgs/user-subscription.png",
 
+          activeIcon: "/imgs/user-subscription-1.png",
 
+
 
+          name: "我的订阅",
 
+          route: "/user/subscription",
 
+        },
 
+        {
 
+          icon: "/imgs/user-like.png",
 
+          activeIcon: "/imgs/user-like-1.png",
 
+
 
+          name: "我的点赞",
 
+          route: "/user/like",
 
+        },
 
+        {
 
+          icon: "/imgs/user-comment.png",
 
+          activeIcon: "/imgs/user-comment-1.png",
 
+
 
+          name: "我的评论",
 
+          route: "/user/comment",
 
+        },
 
+        {
 
+          icon: "/imgs/user-history.png",
 
+          activeIcon: "/imgs/user-history-1.png",
 
+
 
+          name: "浏览记录",
 
+          route: "/user/history",
 
+        },
 
+      ],
 
+    };
 
+  },
 
+};
 
+</script>

+ 30 - 0
src/pc/components/layout-user/layout-user.vue
Zobraziť súbor 

@@ -0,0 +1,30 @@
 
+<template>
 
+  <div class="w-screen">
 
+    <layout-user-header></layout-user-header>
 
+    <div class="h-27px"></div>
 
+
 
+    <div class="w-1200px flex m-auto">
 
+      <layout-user-menu :currentPath="currentPath"></layout-user-menu>
 
+      <div class="w-15px"></div>
 
+      <div class="w-940px bg-white">
 
+        <RouterView></RouterView>
 
+      </div>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  
+  data() {
 
+    return {
 
+      currentPath: this.$route.path,
 
+    };
 
+  },
 
+  beforeRouteEnter(to, from, next) {
 
+    next((vm) => {
 
+      vm.currentPath = to.path;
 
+    });
 
+  },
 
+};
 
+</script>

+ 15 - 0
src/pc/components/ui-devider/ui-devider.vue
Zobraziť súbor 

@@ -0,0 +1,15 @@
 
+<template>
 
+    <div class="w-full h-2px bg-[#f7f7f7]" v-bind="$attrs">
 
+
 
+    </div>
 
+</template>
 
+
 
+<script>
 
+    export default {
 
+        
+    }
 
+</script>
 
+
 
+<style >
 
+
 
+</style>

+ 20 - 0
src/pc/components/ui-input/ui-input.vue
Zobraziť súbor 

@@ -0,0 +1,20 @@
 
+<template>
 
+  <el-input v-bind="$attrs" class="!w-auto !rounded-full h-40px ui-input">
 
+    <template v-for="slot in Object.entries(this.$slots)" :slot="slot[0]">
 
+      <slot :name="slot[0]"></slot>
 
+    </template>
 
+  </el-input>
 
+</template>
 
+
 
+<script>
 
+export default {};
 
+</script>
 
+
 
+<style>
 
+.ui-input .el-input__inner {
 
+  border-radius: 100px !important;
 
+  padding: 0 20px;
 
+  height: 100%;
 
+  widows: 100%;
 
+}
 
+</style>

+ 48 - 0
src/pc/components/ui-main-article/ui-main-article.vue
Zobraziť súbor 

@@ -0,0 +1,48 @@
 
+<template>
 
+  <ui-shadow-box @click="$router.push('/article-detail')" v-bind="$attrs" class="relative">
 
+    <div class="flex bg-white pl-16px pr-14px items-center h-165px">
 
+      <div class="relative">
 
+        <img class="w-250px h-140px object-cover" src="/imgs/article_cover1.png" />
 
+        <div class="absolute left-0 top-0 text-white text-size-12px">
 
+          <img class="w-60px h-auto" src="/imgs/cover-tag.png" />
 
+          <span class="absolute top-0 h-full w-full flex items-center ml-6px"
 
+            >VIP尊享</span
 
+          >
 
+        </div>
 
+      </div>
 
+      <div class="w-19px"></div>
 
+      <div class="flex flex-col flex-1 h-full">
 
+        <div class="h-18px"></div>
 
+        <div class="text-size-20px text-[#000A04] font-thin">
 
+          这里是轮播图推荐内容标题这里是轮播图推荐内容标题
 
+        </div>
 
+        <div class="h-23px"></div>
 
+        <div class="text-[#686868] text-size-16px font-normal leading-20px h-40px">
 
+          这里是文章简介内容这里是文章简介内容这里是文章简介内容这里是文章简介内
 
+          容这里是文这里是文章简介内容这里是文章简介内容这里是文章简介内容这......
 
+        </div>
 
+        <div class="h-32px"></div>
 
+        <div class="flex w-full items-center">
 
+          <div class="text-[#B8B8B8] text-size-14px font-normal">香港特派员赵圆松</div>
 
+          <div class="flex items-center ml-76px">
 
+            <img class="w-18px h-auto" src="/imgs/time.png" />
 
+            <div class="text-[#B8B8B8] text-size-14px font-normal ml-5px">2022-08-09</div>
 
+          </div>
 
+          <div
 
+            v-if="!$slots.right"
 
+            class="text-[#B8B8B8] text-size-14px font-medium ml-auto"
 
+          >
 
+            2803浏览
 
+          </div>
 
+          <slot name="right"></slot>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </ui-shadow-box>
 
+</template>
 
+
 
+<script>
 
+export default {};
 
+</script>
 
+
 
+<style></style>

+ 163 - 0
src/pc/components/ui-nav-bar/ui-nav-bar.vue
Zobraziť súbor 

@@ -0,0 +1,163 @@
 
+<template>
 
+  <div
 
+    class="h-80px w-screen bg-primary flex justify-center overflow-hidden items-center"
 
+  >
 
+    <div class="flex items-center h-full">
 
+      <div class="w-80px"></div>
 
+      <div
 
+        @click="$router.push('/home')"
 
+        :class="`menu-item ${currentPath === '/home' ? 'selected' : ''}`"
 
+      >
 
+        {{ $t("首页") }}
 
+      </div>
 
+      <div class="w-40px"></div>
 
+      <div
 
+        @click="$router.push('/recommend')"
 
+        :class="`menu-item ${currentPath === '/recommend' ? 'selected' : ''}`"
 
+      >
 
+        {{ $t("推荐") }}
 
+      </div>
 
+      <div class="w-40px"></div>
 
+      <div
 
+        @click="typeVisible = !typeVisible"
 
+        :class="`menu-item ${currentPath === '/specific-article' ? 'selected' : ''}`"
 
+      >
 
+        {{ $t("分类浏览") }}
 
+        <img src="/imgs/arrow-down.png" class="w-14px h-6px ml-6px" />
 
+      </div>
 
+      <div class="w-40px"></div>
 
+      <div
 
+        @click="$router.push('/realtime-news')"
 
+        :class="`menu-item ${currentPath === '/realtime-news' ? 'selected' : ''}`"
 
+      >
 
+        {{ $t("实时新闻") }}
 
+      </div>
 
+      <div class="w-40px"></div>
 
+      <div
 
+        @click="$router.push('/vip')"
 
+        :class="`menu-item ${currentPath === '/vip' ? 'selected' : ''}`"
 
+      >
 
+        {{ $t("vip专区") }}
 
+      </div>
 
+      <div class="w-40px"></div>
 
+      <div
 
+        @click="$router.push('/aboutus')"
 
+        :class="`menu-item ${currentPath === '/aboutus' ? 'selected' : ''}`"
 
+      >
 
+        {{ $t("关于我们") }}
 
+      </div>
 
+      <div class="w-260px"></div>
 
+      <div
 
+        @click="$router.push('/publish')"
 
+        :class="`menu-item ${currentPath === '/publish' ? 'selected' : ''}`"
 
+      >
 
+        <img class="w-30px object-contain" src="/imgs/tougao.png" />
 
+        {{ $t("投稿") }}
 
+      </div>
 
+      <div class="w-36px"></div>
 
+      <div
 
+        @click="$router.push('/search')"
 
+        :class="`menu-item ${currentPath === '/search' ? 'selected' : ''}`"
 
+      >
 
+        <img class="w-30px object-contain" src="/imgs/search.png" />
 
+        {{ $t("搜索") }}
 
+      </div>
 
+      <div class="w-40px"></div>
 
+      <div
 
+        @click="$router.push('/user/personal-center')"
 
+        :class="`menu-item ${currentPath === '/login' ? 'selected' : ''}`"
 
+      >
 
+        {{ $t("登录注册") }}
 
+      </div>
 
+      <div class="w-44px"></div>
 
+      <div
 
+        @click="changeLang"
 
+        class="w-30px h-30px rounded-full border-white-2px text-white align-middle text-center cursor-pointer"
 
+      >
 
+        {{ $t("cn") }}
 
+      </div>
 
+    </div>
 
+    <div
 
+      v-if="typeVisible"
 
+      class="min-h-272px w-screen bg-white absolute top-80px z-50 flex justify-center pb-30px"
 
+    >
 
+      <div class="w-1200px flex flex-wrap">
 
+        <div
 
+          @click="() => {
 
+            $router.push('/specific-article')
 
+            typeVisible = false
 
+          }"
 
+          :class="`type-tag ${index === 0 ? 'selected' : ''}`"
 
+          v-for="(item, index) in 20"
 
+          :key="item"
 
+        >
 
+          <div class="name">军事</div>
 
+          <div class="count">1523篇文章</div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  
+  mounted() {
 
+    
+  },
 
+  methods:{
 
+    changeLang(){
 
+      
+      this.$i18n.locale = this.lang[0];
 
+      this.lang = this.lang.reverse()
 
+    }
 
+  },  
+  watch: {
 
+    $route: function (next) {
 
+      console.log(next.path);
 
+      this.currentPath = next.path;
 
+    },
 
+  },
 
+  data() {
 
+    return {
 
+      typeVisible: false,
 
+      currentPath: this.$route.path,
 
+      lang: ['zh-CN','zh-TW']
 
+    };
 
+  },
 
+};
 
+</script>
 
+
 
+<style>
 
+.menu-item {
 
+  @apply text-white text-size-20px cursor-pointer relative h-full flex items-center;
 
+}
 
+.menu-item.selected::after {
 
+  content: "";
 
+  width: 100%;
 
+  height: 3px;
 
+  background: #fff;
 
+  position: absolute;
 
+  bottom: 14px;
 
+  left: 0;
 
+  border-radius: 3px;
 
+}
 
+.type-tag {
 
+  @apply w-110px h-60px bg-[#F7F7F7] flex flex-col justify-center mt-30px pl-15px cursor-pointer;
 
+}
 
+.type-tag.selected {
 
+  @apply bg-primary;
 
+}
 
+.type-tag:not(:nth-child(8n)) {
 
+  @apply mr-40px;
 
+}
 
+.type-tag > .name {
 
+  @apply text-size-16px mb-6px;
 
+}
 
+.type-tag.selected > .name {
 
+  @apply text-white;
 
+}
 
+.type-tag > .count {
 
+  @apply text-size-14px text-[#B8B8B8];
 
+}
 
+</style>

+ 71 - 0
src/pc/components/ui-order-table/ui-order-table.vue
Zobraziť súbor 

@@ -0,0 +1,71 @@
 
+<template>
 
+  <div>
 
+    <el-table
 
+      class="header-table"
 
+      header-cell-class-name="!bg-[#F7F7F7] font-normal text-size-14px "
 
+      header-row-class-name="h-50px"
 
+      :data="[]"
 
+      style="width: 100%"
 
+    >
 
+      <el-table-column v-for="(item, index) in columns" :key="index" v-bind="item">
 
+      </el-table-column>
 
+    </el-table>
 
+    <div class="h-20px"></div>
 
+    <div v-for="(item, index) in data" :key="index" class="mb-20px">
 
+      <div class="h-50px bg-[#F7F7F7] flex justify-between items-center px-10px">
 
+        <div class="text-black whitespace-nowrap text-left">hy645586466152123</div>
 
+        <div class="text-black text-left whitespace-nowrap">2022-08-30 09:35:30</div>
 
+      </div>
 
+      <el-table
 
+        header-cell-class-name="!bg-[#F7F7F7] font-normal text-size-14px "
 
+        header-row-class-name="data-header"
 
+        :data="[item]"
 
+        style="width: 100%"
 
+        :show-header="false"
 
+      >
 
+        <el-table-column v-for="(item, index) in columns" :key="index" v-bind="item">
 
+          <template v-slot:header>
 
+            <div v-if="index === 0" class="text-black whitespace-nowrap text-left">
 
+              hy645586466152123
 
+            </div>
 
+            <div
 
+              v-if="index === columns.length - 1 && index > 0"
 
+              class="text-black text-left whitespace-nowrap"
 
+            >
 
+              2022-08-30 09:35:30
 
+            </div>
 
+          </template>
 
+          <template v-slot:default="props" v-if="$scopedSlots[index] || $slots[index]">
 
+            <slot :name="index" v-bind="props"> </slot>
 
+          </template>
 
+        </el-table-column>
 
+      </el-table>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  props: {
 
+    columns: {
 
+      default: [],
 
+    },
 
+    data: [],
 
+  },
 
+  mounted() {
 
+    console.log("this.slot", this.$scopedSlots);
 
+  },
 
+};
 
+</script>
 
+
 
+<style>
 
+.header-table .el-table__body-wrapper {
 
+  display: none;
 
+}
 
+.data-header > th:first-child {
 
+  @apply absolute z-50;
 
+}
 
+.data-header > th:last-child {
 
+  /* @apply  absolute z-50;  */
 
+}
 
+</style>

+ 24 - 0
src/pc/components/ui-portal/ui-portal.vue
Zobraziť súbor 

@@ -0,0 +1,24 @@
 
+<script>
 
+	export default {
 
+		name: 'ui-teleport',
 
+		props: {
 
+			/* 移动至哪个标签内，最好使用id */
 
+			to: {
 
+				type: String,
 
+				required: true
 
+			}
 
+		},
 
+
 
+		mounted() {
 
+			document.querySelector(this.to).appendChild(this.$el)
 
+		},
 
+
 
+		destroyed() {
 
+			document.querySelector(this.to).removeChild(this.$el)
 
+		},
 
+
 
+		render() {
 
+			return this.$scopedSlots.default()
 
+		}
 
+	}
 
+</script>

+ 12 - 0
src/pc/components/ui-shadow-box/ui-shadow-box.vue
Zobraziť súbor 

@@ -0,0 +1,12 @@
 
+<template>
 
+  <div v-bind="$attrs" v-on="$listeners"  class="rounded-3px shadow bg-white">
 
+      
+    <slot></slot>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {};
 
+</script>
 
+
 
+<style></style>

+ 29 - 0
src/pc/components/ui-small-article/ui-small-article.vue
Zobraziť súbor 

@@ -0,0 +1,29 @@
 
+<template>
 
+  <div class="flex bg-white items-center h-87px">
 
+    <div class="relative">
 
+      <img class="w-116px h-65px object-cover" src="/imgs/article_cover1.png" />
 
+      <div class="absolute left-0 top-0 text-white text-size-12px">
 
+        <img class="w-60px h-auto" src="/imgs/cover-tag.png" />
 
+        <span class="absolute top-0 h-full w-full flex items-center ml-6px">VIP尊享</span>
 
+      </div>
 
+    </div>
 
+    <div class="w-10px"></div>
 
+    <div class="flex flex-col flex-1 h-full">
 
+      <div class="h-12px"></div>
 
+      <div class="flex-col flex justify-between h-full items-end">
 
+        <div class="w-full text-size-14px text-[#000] font-normal">
 
+          这里是轮播图推荐内容标题这里是轮播图推荐内容标题
 
+        </div>
 
+
 
+        <div class="text-[#B8B8B8] text-size-14px font-medium">2803浏览</div>
 
+      </div>
 
+      <div class="h-14px"></div>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {};
 
+</script>
 
+
 
+<style></style>

+ 99 - 0
src/pc/components/ui-swiper/ui-swiper.vue
Zobraziť súbor 

@@ -0,0 +1,99 @@
 
+<template>
 
+  <div v-bind="$attrs" class="relative w-full">
 
+    <swiper ref="swiper" class="relative w-full h-full" :options="swiperOption">
 
+      <swiper-slide v-for="(item, index) in items" :key="index">
 
+        <div class="w-full h-full absolute bg-[rgba(0,0,0,0.3)]"></div>
 
+        <img class="w-full h-full object-cover" :src="item.url" />
 
+
 
+        <div
 
+          :class="`absolute bottom-23px left-26px font-normal z-50 flex text-white text-size-20px ${
 
+            titleClass ?? ''
 
+          }`"
 
+        >
 
+          {{ item.title }}
 
+        </div>
 
+      </swiper-slide>
 
+    </swiper>
 
+    <div v-if="showPagination" :class="`absolute bottom-22px right-12px z-50 flex ${paginationclass}`">
 
+      <div
 
+        @click="clickPagination(index)"
 
+        v-for="(item, index) in items"
 
+        :key="index"
 
+        :class="`dot ${index === activeIndex ? 'selected' : ''}`"
 
+      ></div>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+import { nanoid } from "nanoid";
 
+import { Swiper, SwiperSlide } from "vue-awesome-swiper";
 
+import "swiper/swiper-bundle.min.css";
 
+
 
+import SwiperCore, { Autoplay } from "swiper/core";
 
+SwiperCore.use([Autoplay]);
 
+
 
+export default {
 
+  components: {
 
+    Swiper,
 
+    SwiperSlide,
 
+  },
 
+  props: {
 
+    items: {
 
+      default: [],
 
+    },
 
+    showPagination: {
 
+      default: false,
 
+    },
 
+    paginationclass:{
 
+      default: ''
 
+    } ,
 
+    titleClass: {},
 
+  },
 
+  computed: {
 
+    paginationId: () => nanoid(6),
 
+    swiperOption: () => ({
 
+      slidesPerView: 1,
 
+      click: false,
 
+      // loop: true,
 
+      autoplay: {
 
+        delay: 2000,
 
+        // pauseOnMouseEnter: true,
 
+      },
 
+    }),
 
+  },
 
+
 
+  data() {
 
+    return {
 
+      activeIndex: 0,
 
+    };
 
+  },
 
+
 
+  methods: {
 
+    change(swiper) {
 
+      if (!this.showPagination) return;
 
+      this.activeIndex = swiper.activeIndex;
 
+    },
 
+    clickPagination(index) {
 
+      this.$refs.swiper.$swiper.slideTo(index);
 
+    },
 
+  },
 
+  mounted() {
 
+    this.$refs.swiper.$swiper.on("activeIndexChange", this.change);
 
+  },
 
+};
 
+</script>
 
+<style>
 
+.swiper-pagination-bullet-active {
 
+  @apply bg-white;
 
+}
 
+.swiper-pagination-bullet {
 
+  @apply bg-rgba(255,255,255,1);
 
+}
 
+.dot {
 
+  @apply w-12px h-12px rounded-full bg-[rgba(255,255,255,0.3)] mr-10px cursor-pointer;
 
+}
 
+.dot.selected {
 
+  @apply bg-white;
 
+}
 
+</style>

+ 18 - 0
src/pc/components/ui-title-devider/ui-title-devider.vue
Zobraziť súbor 

@@ -0,0 +1,18 @@
 
+<template>
 
+  <div class="pl-17px text-size-20px font-thin">
 
+    <div>{{ $t(title) }}</div>
 
+    <div class="h-14.5px"></div>
 
+    <ui-devider v-if="showBorder"></ui-devider>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  props: {
 
+    title: {},
 
+    showBorder: {
 
+      default: true,
 
+    },
 
+  },
 
+};
 
+</script>

+ 22 - 0
src/pc/components/ui-vip-article/ui-vip-article.vue
Zobraziť súbor 

@@ -0,0 +1,22 @@
 
+<template>
 
+  <div class="h-157px flex items-center " v-bind="$attrs" @click="$router.push('product-detail')">
 
+    <!-- <div class="mr-12.5px">
 
+      
+    </div> -->
 
+    <img src="/imgs/vip-cover1.png" class="w-100px h-133px object-cover mr-12.5px" />
 
+    <div class="flex flex-col h-full">
 
+      <div class="h-20.5px"></div>
 
+
 
+      <div class="flex flex-1 flex-col justify-between">
 
+        <div class="h-28px text-size-14px font-normal text-black ">
 
+          这里是期刊名这里是期刊名 是期
 
+        </div>
 
+        <div class="text-size-14px font-normal text-[#686868]">每389期</div>
 
+        <div class="text-size-14px font-normal text-[#686868]">January 2017</div>
 
+        <div class="text-size-14px font-normal text-[#686868]">共20篇</div>
 
+      </div>
 
+
 
+      <div class="h-18px"></div>
 
+    </div>
 
+  </div>
 
+</template>

+ 38 - 0
src/pc/components/ui-vip-preset/ui-vip-preset.vue
Zobraziť súbor 

@@ -0,0 +1,38 @@
 
+<template>
 
+  <div class="preset relative">
 
+    <div class="m-auto mt-25px w-227.74px relative">
 
+      <img src="/imgs/vip-preset-bg.png" class="w-full h-auto" />
 
+      <div class="absolute top-0 left-0 flex flex-col items-center w-full h-full">
 
+        <div class="text-size-20px text-primary font-light mb-11px mt-11px">月会员</div>
 
+        <div class="text-size-15px text-black mb-30px">30天</div>
 
+        <div class="text-size-15px text-[#686868] mb-38px">原价88元/月，现7.8折</div>
 
+        <div class="text-size-25px text-primary font-light">仅39元</div>
 
+      </div>
 
+    </div>
 
+    <div class="absolute flex flex-col w-full items-center bottom-25px">
 
+      <div class="w-204px text-size-14px leading-20px">
 
+        会员权益说明内容会员权益说明内容会员权益说明内容会员权益说明内容会员权益说明内容会员权益说明内容
 
+      </div>
 
+      <div
 
+        class="w-168px h-34px rounded-full text-primary border-1px border-solid border-primary flex items-center justify-center cursor-pointer"
 
+      >
 
+        立即开通
 
+      </div>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {};
 
+</script>
 
+
 
+<style>
 
+.preset {
 
+  @apply w-253px h-367px;
 
+  /* 矩形 145 */
 
+
 
+  border-radius: 3px;
 
+
 
+  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
 
+}
 
+</style>

+ 17 - 0
src/pc/index.html
Zobraziť súbor 

@@ -0,0 +1,17 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="utf-8" />
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
+    <meta
 
+      name="viewport"
 
+      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
 
+    />
 
+    <link rel="icon" href="/favicon.ico" />
 
+    <title>周刊</title>
 
+  </head>
 
+  <body>
 
+    <div id="app"></div>
 
+    <script type="module" src="/src/pc/main.js"></script>
 
+  </body>
 
+</html>

+ 0 - 0
src/pc/main.js
Zobraziť súbor


Niektoré súbory nie sú zobrazené, pretože je v týchto rozdielových dátach zmenené mnoho súborov