ui

.eslintignore

@@ -2,4 +2,4 @@ dist
 public
 src
 /
-vite.config.ts
+vite.config*.ts

package.json

@@ -5,11 +5,14 @@
     "dev:pc": "vite --mode pc",
     "dev:h5": "vite --mode h5",
     "build": "vite build",
+    "build:h5": "vite build --mode h5",
     "lint": "eslint \"**/*.{vue,ts,js}\"",
     "lint:fix": "eslint \"**/*.{vue,ts,js}\" --fix"
   },
   "dependencies": {
+    "@nutui/nutui": "2",
     "@vueuse/core": "^9.0.0",
+    "better-scroll": "^2.5.0",
     "core-js": "^3.24.0",
     "dom-to-image": "^2.6.0",
     "element-ui": "^2.15.10",
@@ -17,6 +20,7 @@
     "nanoid": "^4.0.0",
     "portal-vue": "^2.1.7",
     "swiper": "6.x",
+    "vant": "^2.12.51",
     "vue": "^2.7.8",
     "vue-awesome-swiper": "4.1.1",
     "vue-i18n": "8",
@@ -29,6 +33,8 @@
     "@vitejs/plugin-vue2": "^1.1.2",
     "eslint": "^8.20.0",
     "husky": "^8.0.1",
+    "less": "^4.1.3",
+    "postcss-px-to-viewport": "^1.1.1",
     "postcss-pxtorem": "^6.0.0",
     "sass": "^1.55.0",
     "typescript": "^4.7.4",

postcss.config.js

@@ -1,16 +1,9 @@
-var pxtorem = require("postcss-pxtorem");
+var pxtoviewport = require("postcss-px-to-viewport");
 
 module.exports = {
-  plugins: {
-    "postcss-pxtorem": pxtorem({
-      rootValue: 16,
-      unitPrecision: 5,
-      propList: ["*"],
-      selectorBlackList: [],
-      replace: true,
-      mediaQuery: false,
-      minPixelValue: 0,
-      exclude: /node_modules/i,
-    }),
-  },
+  plugins: [pxtoviewport({
+    viewportWidth: 375,
+    propList: ['*'],
+    include:/\/node_modules\/vant/
+  })],
 };

src/common/components/framework-auto-size.vue

@@ -0,0 +1,24 @@
+<template>
+  <div ref="autoArapper" class="h-full w-full flex flex-col ">
+    <div class="flex-1">
+      <slot v-bind:size="size"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      size: void 0
+    }
+  },
+  mounted() {
+    const size = window.getComputedStyle(this.$refs.autoArapper);
+    console.log('%c [ size ]-18', 'font-size:13px; background:pink; color:#bf2c9f;', size)
+    this.size = size;
+  },
+};
+</script>
+
+<style></style>

src/h5/App.vue

@@ -1,11 +1,10 @@
 <template>
-  <div id="app">
-    <div class="w-375rem bg-red-400">1w</div>
+  <div id="app" class="h-100vh overflow-hidden">
     <RouterView />
   </div>
 </template>
-<style>
+<style lang="scss">
 body {
-  @apply bg-[#F7F7F7];
+  @apply bg-[#F7F7F7] overflow-hidden h-screen;
 }
 </style>

src/h5/components.d.ts

@@ -9,6 +9,7 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     Feature: typeof import('./components/Feature.vue')['default']
     Features: typeof import('./components/Features.vue')['default']
+    FrameworkAutoSize: typeof import('./../common/components/framework-auto-size.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']
@@ -17,20 +18,27 @@ declare module '@vue/runtime-core' {
     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']
+    OrderDetailInfoItem: typeof import('./pages/product/_components/order-detail-info-item.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']
+    UiMaskPicture: typeof import('./components/ui-mask-picture/ui-mask-picture.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']
+    UiPageLayout: typeof import('./components/ui-page-layout/ui-page-layout.vue')['default']
     UiPortal: typeof import('./components/ui-portal/ui-portal.vue')['default']
+    UiScrollView: typeof import('./components/ui-scroll-view/ui-scroll-view.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']
+    UiTabBar: typeof import('./components/ui-tab-bar/ui-tab-bar.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']
+    UserOrderItem: typeof import('./pages/user/_components/user-order-item.vue')['default']
+    UserVipOrderItem: typeof import('./pages/user/_components/user-vip-order-item.vue')['default']
   }
 }

src/h5/components/layout-basic/layout-basic.vue

@@ -1,49 +1,9 @@
 <template>
-  <div class="w-screen flex flex-col items-center overflow-x-hidden">
-    <ui-nav-bar></ui-nav-bar>
-    <div class="min-h-1024px">
+  <div class="w-screen flex flex-col h-full overflow-hidden">
+    <div class="flex-1 overflow-hidden">
       <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>
+    <UiTabBar></UiTabBar>
   </div>
 </template>
 

src/h5/components/layout-user/layout-user-header.vue

@@ -1,37 +1,29 @@
 <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 class="w-full h-220rem relative bg-primary flex items-center">
 
-          <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 class=" w-full flex items-center justify-between px-24rem">
+      <div @click="$router.push('/user/account-setting')" class="flex h-120rem">
+        <div class="w-120rem h-120rem rounded-full border-white border-1rem border-solid mr-20rem">
+          <img src="/imgs/avatar.png" class="object-cover w-full h-full" />
         </div>
-        <div class="flex items-center">
-          <div class="text-white text-size-18px mr-19px">
-            {{ $t("当前为月会员,有效期至2022年9月28日") }}
+
+        <div class="flex flex-col h-full justify-around">
+          <div class="text-size-36rem font-300 text-white flex items-end">
+            <span>cyt</span>
+            <img src="/imgs/h5-vip.png" class="w-25rem h-auto ml-10rem" />
           </div>
-          <div
-            class="text-size-14px text-white w-80px h-30px bg-primary flex items-center justify-center rounded-full"
-          >
-            续 费
+          <div class="text-size-36rem font-300 text-white">2342342332@qq.com</div>
+          <div class="text-white text-size-20rem font-300 mr-19rem">
+            {{ $t("当前为月会员,有效期至2022年9月28日") }}
           </div>
         </div>
       </div>
+      <div class="flex items-center">
+        <div
+          class="text-size-24rem text-primary w-120rem h-50rem bg-white flex items-center justify-center rounded-full">
+          续 费
+        </div>
+      </div>
     </div>
   </div>
 </template>

src/h5/components/layout-user/layout-user.vue

@@ -1,21 +1,81 @@
 <template>
-  <div class="w-screen">
-    <layout-user-header></layout-user-header>
-    <div class="h-27px"></div>
+  <ui-page-layout :showLeft="false" title="个人中心" class="w-screen">
+    <ui-scroll-view>
+      <layout-user-header></layout-user-header>
+      <div class="h-24rem"></div>
+      <div class=" bg-white">
+        <div class="flex items-center px-24rem h-100rem justify-between">
+          <div class="text-size-36rem text-[#282828]">{{ $t("我的订单") }}</div>
+          <div @click="$router.push('/user/order')" class="text-size-30rem text-[#686868] flex items-center">
+            <span>{{ $t("全部") }}</span>
+            <img src="/imgs/my-order-arrow-right.png" class="w-10rem h-auto ml-20rem" />
+          </div>
 
-    <div class="w-1200px flex m-auto">
+        </div>
+        <div class="h-0.5px bg-[#E8E8E8] w-full"></div>
+        <div class="flex justify-around items-center h-200rem">
+          <div @click="$router.push('/user/order')" class="flex flex-col items-center">
+            <img src="/imgs/h5-vip-order.png" class="w-60rem h-auto mb-20rem" />
+            <div class="text-size-30rem">{{ $t("vip工单") }}</div>
+          </div>
+          <div @click="$router.push('/user/order')" class="flex flex-col items-center">
+            <img src="/imgs/h5-goods-order.png" class="w-60rem mb-20rem" />
+            <div class="text-size-30rem">{{ $t("商品订单") }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="h-24rem"></div>
+      <div @click="$router.push('/user/collection')" class="h-100rem bg-white px-24rem mb-24rem flex justify-between items-center">
+        <div class="flex items-center">
+          <img src="/imgs/h5-user-collection.png" class="w-40rem h-auto" />
+          <div class="text-size-30rem text-[#282828] ml-33rem">{{ $t("我的收藏") }}</div>
+        </div>
+        <img src="/imgs/my-order-arrow-right.png" class="w-10rem h-auto ml-20rem" />
+      </div>
+      <div @click="$router.push('/user/subscription')" class="h-100rem bg-white px-24rem mb-24rem flex justify-between items-center">
+        <div class="flex items-center">
+          <img src="/imgs/h5-user-subscription.png" class="w-40rem h-auto" />
+          <div class="text-size-30rem text-[#282828] ml-33rem">{{ $t("我的订阅") }}</div>
+        </div>
+        <img src="/imgs/my-order-arrow-right.png" class="w-10rem h-auto ml-20rem" />
+      </div>
+      <div @click="$router.push('/user/comment')" class="h-100rem bg-white px-24rem mb-24rem flex justify-between items-center">
+        <div class="flex items-center">
+          <img src="/imgs/h5-user-comment.png" class="w-40rem h-auto" />
+          <div class="text-size-30rem text-[#282828] ml-33rem">{{ $t("我的评论") }}</div>
+        </div>
+        <img src="/imgs/my-order-arrow-right.png" class="w-10rem h-auto ml-20rem" />
+      </div>
+      <div @click="$router.push('/user/like')" class="h-100rem bg-white px-24rem mb-24rem flex justify-between items-center">
+        <div class="flex items-center">
+          <img src="/imgs/h5-user-like.png" class="w-40rem h-auto" />
+          <div class="text-size-30rem text-[#282828] ml-33rem">{{ $t("我的点赞") }}</div>
+        </div>
+        <img src="/imgs/my-order-arrow-right.png" class="w-10rem h-auto ml-20rem" />
+      </div>
+      <div @click="$router.push('/user/history')" class="h-100rem bg-white px-24rem mb-24rem flex justify-between items-center">
+        <div class="flex items-center">
+          <img src="/imgs/h5-user-history.png" class="w-40rem h-auto" />
+          <div class="text-size-30rem text-[#282828] ml-33rem">{{ $t("浏览记录") }}</div>
+        </div>
+        <img src="/imgs/my-order-arrow-right.png" class="w-10rem h-auto ml-20rem" />
+      </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>
+    </div> -->
+    </ui-scroll-view>
+  </ui-page-layout>
 </template>
 
 <script>
 export default {
-  
+
   data() {
     return {
       currentPath: this.$route.path,

src/h5/components/ui-devider/ui-devider.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="w-full h-2px bg-[#f7f7f7]" v-bind="$attrs">
+    <div class="w-full h-1rem bg-[#f7f7f7]" v-bind="$attrs">
 
     </div>
 </template>

src/h5/components/ui-input/ui-input.vue

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

src/h5/components/ui-main-article/ui-main-article.vue

@@ -1,48 +1,41 @@
 <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 @click="$router.push('/article-detail')" v-bind="$attrs" class="relative border-b-1rem border-solid border-[#B8B8B8]">
+    <div class="flex mb-22rem  items-center h-165rem">
       <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
-          >
+        <img class="w-270rem h-150rem object-cover" src="/imgs/article_cover1.png" />
+        <div class="absolute left-0 top-0 text-white text-size-20rem">
+          <img class="w-100rem h-auto" src="/imgs/h5-vip-tag.png" />
+          <span class="absolute top-0 h-full w-full flex items-center ml-6rem">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 class="w-19rem"></div>
+      <div class="flex flex-col flex-1 h-full justify-between">
+        <div class="h-18rem"></div>
+        <div class="text-size-30rem text-[#000A04] font-normal">
           这里是轮播图推荐内容标题这里是轮播图推荐内容标题
         </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="h-32rem"></div>
+        <div class="text-[#B8B8B8] text-size-24rem font-normal">香港特派员赵圆松</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 class="flex items-center ">
+            <img class="w-26rem h-auto" src="/imgs/time.png" />
+            <div class="text-[#B8B8B8] text-size-24rem font-normal ml-5rem">2022-08-09</div>
           </div>
-          <div
-            v-if="!$slots.right"
-            class="text-[#B8B8B8] text-size-14px font-medium ml-auto"
-          >
+          <div v-if="!$slots.right" class="text-[#B8B8B8] text-size-24rem font-normal ml-auto">
             2803浏览
           </div>
           <slot name="right"></slot>
         </div>
       </div>
     </div>
-  </ui-shadow-box>
+  </div>
 </template>
 
 <script>
 export default {};
 </script>
 
-<style></style>
+<style>
+
+</style>

src/h5/components/ui-mask-picture/ui-mask-picture.vue

@@ -0,0 +1,14 @@
+<template>
+    <div v-bind="$attrs" class="relative">
+        <img src="/imgs/article_cover_small1.png" class="w-full h-full object-cover" />
+        <div class="w-full h-full absolute opacity-30 bg-[#010101] top-0">
+
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>

src/h5/components/ui-nav-bar/ui-nav-bar.vue

@@ -1,117 +1,46 @@
 <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 class="ui-nav-bar bg-primary ">
+    <!-- <van-nav-bar safe-area-inset-top class="h-0" /> -->
+
+    <div class="h-88rem w-screen  flex  overflow-hidden items-center justify-between px-24rem">
+
+      <div class="w-26rem">
+
+        <img v-if="showLeft" @click="goBack" class="w-26rem h-auto" src="/imgs/nav-back-icon.png" />
       </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 class="text-white text-size-36rem flex-1 text-center ">
+        {{ $t(title) }}
       </div>
+      <img @click="$emit('clickMenu')" class="w-39rem h-auto" src="/imgs/nav-menu.png" />
+
     </div>
+    <slot name="search"></slot>
+
   </div>
 </template>
 
 <script>
 export default {
-  
+  props: {
+    title: {},
+    showLeft: {
+      default: true
+    }
+  },
   mounted() {
-    
+
   },
-  methods:{
-    changeLang(){
-      
+  methods: {
+    changeLang() {
+
       this.$i18n.locale = this.lang[0];
       this.lang = this.lang.reverse()
+    },
+    goBack() {
+      this.$router.back()
     }
-  },  
+  },
   watch: {
     $route: function (next) {
       console.log(next.path);
@@ -122,7 +51,7 @@ export default {
     return {
       typeVisible: false,
       currentPath: this.$route.path,
-      lang: ['zh-CN','zh-TW']
+      lang: ['zh-CN', 'zh-TW']
     };
   },
 };
@@ -132,6 +61,7 @@ export default {
 .menu-item {
   @apply text-white text-size-20px cursor-pointer relative h-full flex items-center;
 }
+
 .menu-item.selected::after {
   content: "";
   width: 100%;
@@ -142,22 +72,36 @@ export default {
   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 {
+
+.type-tag>.name {
   @apply text-size-16px mb-6px;
 }
-.type-tag.selected > .name {
+
+.type-tag.selected>.name {
   @apply text-white;
 }
-.type-tag > .count {
+
+.type-tag>.count {
   @apply text-size-14px text-[#B8B8B8];
 }
+
+.ui-nav-bar .van-field__body {
+  @apply h-full;
+}
+
+.ui-nav-bar .van-field__body input {
+  @apply pl-24rem;
+}
 </style>

src/h5/components/ui-order-table/ui-order-table.vue

@@ -1,47 +1,7 @@
 <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>
+  <ui-page-layout title="订单详情">
+
+  </ui-page-layout>
 </template>
 
 <script>
@@ -59,13 +19,5 @@ export default {
 </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>

src/h5/components/ui-page-layout/ui-page-layout.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="w-screen overflow-hidden flex flex-col h-full relative">
+    <ui-nav-bar @clickMenu="showSlider = !showSlider" v-bind="$attrs">
+      <template v-slot:search>
+        <slot name="search"></slot>
+      </template>
+    </ui-nav-bar>
+    <div v-bind="$attrs" class="page-body flex-1 overflow-hidden relative">
+      <ui-scroll-view>
+        <div v-if="showSlider" class="w-full h-full bg-[rgba(0,0,0,0.6)]   absolute flex justify-end z-50">
+          <div @click="showSlider = false" class="h-full flex-1">
+            
+          </div>
+          <div class=" h-full w-400rem bg-white right-0 flex flex-col items-center">
+            <div class="bg-[#F7F7F7] w-336rem h-98rem rounded-full flex items-center pl-24rem mt-48rem">
+              <div
+                class="w-40rem h-40rem rounded-full mr-12rem border-2rem border-black border-solid flex justify-center items-center text-[#231815]">
+                中
+              </div>
+              <div>中文简体</div>
+            </div>
+            <div class="bg-[#F7F7F7] w-336rem h-98rem rounded-full flex items-center pl-24rem mt-48rem">
+              <div
+                class="w-40rem h-40rem rounded-full mr-12rem border-2rem border-black border-solid flex justify-center items-center text-[#231815]">
+                中
+              </div>
+              <div>中文繁体</div>
+            </div>
+          </div>
+        </div>
+
+        <slot></slot>
+      </ui-scroll-view>
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      showSlider: false
+    }
+  }
+};
+</script>
+<style>
+.page-body {}
+</style>

src/h5/components/ui-scroll-view/ui-scroll-view.vue

@@ -0,0 +1,61 @@
+<template>
+  <div ref="wrapper" class="ui-scroll-view h-full flex-1 overflow-scroll">
+    <div ref="content" class="overflow-hidden">
+      <slot> </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import BScroll from "better-scroll";
+
+export default {
+  data() {
+    return {
+      bs: null,
+      observer: null,
+      childHeight: 0
+    };
+  },
+
+  mounted() {
+
+
+    // this.bs = new BScroll(this.$refs.wrapper, {
+
+    //   scrollY: true,
+    //   bounce: false,
+    //   click: true,
+    // });
+    
+
+    const observer = new MutationObserver(() => {
+      this.bs?.refresh();
+    })
+    
+    observer.observe(this.$refs.content, {
+      childList: true, // 子节点的变动（新增、删除或者更改）
+      attributes: true, // 属性的变动
+      characterData: true, // 节点内容或节点文本的变动
+      subtree: true // 是否将观察器应用于该节点的所有后代节点
+    })
+    // setInterval(() => {
+    //   this.bs?.refresh();
+    // }, 250);
+
+  },
+  // unmounted() {
+  //   this.observer?.disconnect()
+  // },
+  updated() {
+    this.$nextTick(() => {
+
+      this.bs?.refresh();
+    })
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/h5/components/ui-shadow-box/ui-shadow-box.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-bind="$attrs" v-on="$listeners"  class="rounded-3px shadow bg-white">
+  <div v-bind="$attrs" v-on="$listeners"  class="rounded-3rem shadow bg-white">
       
     <slot></slot>
   </div>

src/h5/components/ui-swiper/ui-swiper.vue

@@ -6,7 +6,7 @@
         <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 ${
+          :class="`absolute bottom-23rem left-26rem font-normal z-50 flex text-white text-size-20rem ${
             titleClass ?? ''
           }`"
         >
@@ -14,7 +14,7 @@
         </div>
       </swiper-slide>
     </swiper>
-    <div v-if="showPagination" :class="`absolute bottom-22px right-12px z-50 flex ${paginationclass}`">
+    <div v-if="showPagination" :class="`absolute bottom-22rem right-12rem z-50 flex ${paginationclass}`">
       <div
         @click="clickPagination(index)"
         v-for="(item, index) in items"
@@ -91,7 +91,7 @@ export default {
   @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;
+  @apply w-12rem h-12rem rounded-full bg-[rgba(255,255,255,0.3)] mr-10rem cursor-pointer;
 }
 .dot.selected {
   @apply bg-white;

src/h5/components/ui-tab-bar/ui-tab-bar.vue

@@ -0,0 +1,82 @@
+<template>
+    <div class="h-98rem">
+        <van-tabbar class="h-98rem" v-model="active" safe-area-inset-bottom>
+            <van-tabbar-item @click="tab.onClick" v-for="(tab, index) in tabList" :key="index">
+
+                <template #icon="props">
+                    <div class="flex items-center flex-col">
+                        <img class="w-60rem h-60rem object-contain"
+                            :src="props.active ? tab.activeIcon : tab.activeIcon" />
+                        <span
+                            :class="`${props.active ? 'text-primary' : 'text-[#010101]'} text-size-20rem`">{{tab.title}}</span>
+                    </div>
+
+                </template>
+            </van-tabbar-item>
+
+        </van-tabbar>
+
+    </div>
+
+</template>
+
+<script>
+export default {
+
+    data() {
+        return {
+            currentPath: this.$route.path,
+            tabList: [
+                {
+                    icon: '/imgs/tab-home.png',
+                    activeIcon: '/imgs/tab-home-checked.png',
+
+                    title: '首页',
+                    onClick: () => { 
+                        this.$router.push("/home")
+                    }
+                },
+                {
+                    icon: '/imgs/tab-publish.png',
+                    activeIcon: '/imgs/tab-publish-checked.png',
+                    title: '投稿',
+                    onClick: () => { 
+                        this.$router.push("/publish")
+                    }
+                },
+                {
+                    icon: '/imgs/tab-aboutus.png',
+                    activeIcon: '/imgs/tab-aboutus-checked.png',
+                    title: '关于我们',
+                    onClick: () => { 
+                        this.$router.push("/aboutus")
+                    }
+                },
+                {
+                    icon: '/imgs/tab-user.png',
+                    activeIcon: '/imgs/tab-user-checked.png',
+                    title: '我的',
+                    onClick: () => { 
+                        this.$router.push("/user")
+                    }
+                },
+            ]
+        }
+    },
+    watch: {
+        $route: function (next) {
+
+            this.currentPath = next.path;
+        },
+    },
+    computed: {
+        active: (vm) => {
+
+            const routes = ['/home', '/publish', '/aboutus', '/user']
+            return routes.findIndex(path => path === vm.currentPath)
+
+        }
+    }
+}
+</script>
+

src/h5/components/ui-vip-article/ui-vip-article.vue

@@ -1,22 +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" />
+  <ui-shadow-box>
+  <div class="h-306rem flex items-center px-24rem " v-bind="$attrs" @click="$router.push('product-detail')">
+
+    <img src="/imgs/vip-cover1.png" class="w-192rem h-256rem object-cover mr-12.5rem" />
     <div class="flex flex-col h-full">
-      <div class="h-20.5px"></div>
+      <div class="h-20.5rem"></div>
 
       <div class="flex flex-1 flex-col justify-between">
-        <div class="h-28px text-size-14px font-normal text-black ">
+        <div class="h-100rem text-size-36rem leading-50rem 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 class="text-size-30rem font-300 text-[#686868]">每389期</div>
+        <div class="text-size-30rem font-300 text-[#686868]">January 2017</div>
+        <div class="text-size-30rem font-300 text-[#686868]">共20篇</div>
       </div>
 
-      <div class="h-18px"></div>
+      <div class="h-18rem"></div>
     </div>
   </div>
+</ui-shadow-box>
 </template>

src/h5/index.html

@@ -5,14 +5,18 @@
     <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"
+      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,viewport-fit=cover"
     />
     <link rel="icon" href="/favicon.ico" />
     <title>周刊</title>
   </head>
   <style>
     html {
-      font-size: calc(100vw / 750 );
+      font-size: calc(100vw / 750);
+    }
+    body {
+      font-size: 24rem;
+      
     }
   </style>
   <body>

src/h5/main.js

@@ -3,15 +3,24 @@ import App from "@h5/App.vue";
 import VueI18n from "vue-i18n";
 
 import 'virtual:windi.css'
-import router from "@pc/router";
+import router from "@h5/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 '@pc/assets/css/index.css'
+import '@h5/assets/css/index.css'
+import Vant from 'vant';
+import 'vant/lib/index.css';
 
+import NutUI from '@nutui/nutui';
+import '@nutui/nutui/dist/nutui.css';
+
+NutUI.install(Vue);
+
+Vue.use(Vant);
 Vue.use(ElementUI);
 
+
 Vue.config.productionTip = false;
 Vue.config.devtools = true;
 

src/h5/pages/aboutus/aboutus.vue

@@ -1,18 +1,11 @@
 <template>
-  <div>
-    <ui-swiper
-      :showPagination="true"
-      :items="banner1"
-      class="w-screen h-350px"
-    ></ui-swiper>
-
-    <div class="w-1200px m-auto">
-      <div class="mt-68px text-[#000A04] text-size-36px text-center font-light">
-        关于我们
-      </div>
-      <div class="mt-80px" v-html="html"></div>
+  <ui-page-layout :showLeft="false" title="关于我们">
+    <div class="p-24rem">
+      <div  v-html="html"></div>
     </div>
-  </div>
+
+    
+  </ui-page-layout>
 </template>
 
 <script>
@@ -39,4 +32,6 @@ export default {
   },
 };
 </script>
-<style></style>
+<style>
+
+</style>

src/h5/pages/article-detail/article-detail.vue

@@ -1,103 +1,76 @@
 <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>
+  <ui-page-layout title="文章详情">
+    <div class="px-24rem bg-white w-full pb-98rem">
+
+      <div class="w-full bg-white h-auto rem-30rem pt-30rem mb-14rem">
+        <div class="text-size-40rem text-[#000]   mb-27rem">
+          这里是文章标题这里是文章标题，文章标题
+          这里是文章标题这里是文章标题，文章标题
+        </div>
+        <div class="text-[#B8B8B8] text-size-24rem mb-19rem">香港特派员赵圆松</div>
+        <div class="flex text-[#B8B8B8] text-size-14rem items-center justify-between mb-33rem">
+          <div class="flex items-center">
+
+            <div class=" flex items-center">
+              <img class="w-18rem h-auto mr-8rem" src="/imgs/time.png" />
+              <span>2022-08-26</span>
             </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 class="flex items-center text-size-20rem">
+            <div class="mr-24rem">5评论</div>
+            <div class="mr-24rem">10点赞</div>
+            <div class="mr-24rem">56收藏</div>
+            <div>36582浏览</div>
           </div>
-          <div class="flex justify-center mb-30px">
-            <el-button type="primary" round class="h-40px w-400px"
-              >成为会员，查看更多精彩内容！</el-button
-            >
+        </div>
+        <div class="bg-[#F7F7F7] p-24rem text-[#686868] text-size-16rem leading-32rem whitespace-pre-wrap mb-30rem">
+          <p class="indent-32rem">
+            这里是文章简介或摘要内容，这里是文章简介或摘要内容这里是文章简介或摘要内容，这里是文章简介
+            或摘容，这里是文章简介或摘要内容，这里是文章简介或摘要内容这里是文章简介或摘要内容。这里是文章
+            简介或摘要内容，这里是文章简介或摘要内容，这里是文章简介或摘要内容这里是文章简介或摘要内容。
+          </p>
+        </div>
+        <div class="content" v-html="html"></div>
+        <div class="p-24rem bg-[#f7f7f7] text-[#686868] leading-32rem text-size-16rem mb-30rem">
+          <p>作者：香港特派员赵圆松；期刊：尖瑞科技期刊（ID：business-data）</p>
+          <p>本文由 @商业数据派 原创发布于杂志期刊，未经许可，禁止转载。</p>
+          <p>题图来自 Unsplash，基于CC0协议</p>
+        </div>
+        <div class="flex justify-center mb-30rem">
+          <div type="primary" round
+            class="h-60rem w-500rem bg-primary flex justify-center items-center rounded-full text-white">成为会员，查看更多精彩内容！
           </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>
+        <ui-devider class="mb-30rem"></ui-devider>
+        <div class="flex items-center justify-between">
+          <div class="flex items-center">
+            <el-switch v-model="subscriped" inactive-color="#E1E1E1" class="mr-10rem">
+            </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 class="text-size-30rem text-[#282828]">开启订阅，将为您推荐同类精彩内容！</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>
+          <!-- <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-46rem"></div>
+
+        <div class="rem-30rem pt-37rem pb-44rem">
+          <div class="text-size-30rem mb-16rem">全部评论</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 class="flex items-start py-30rem">
+              <img class="w-60rem h-60rem round" src="/imgs/avatar.png" />
+              <div class="mt-8rem ml-14rem">
+                <div class="flex mb-14rem items-center">
+                  <div class=" text-size-30rem mr-30rem">用户名</div>
+                  <div class="text-size-24rem text-[#B8B8B8]">2022-08-26 06:53</div>
                 </div>
-                <div class="text-[#686868] leading-20px text-size-14px">
+                <div class="text-[#686868] leading-34rem text-size-24rem">
                   评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容
                 </div>
               </div>
@@ -105,134 +78,81 @@
             <ui-devider></ui-devider>
           </div>
           <div class="flex justify-center">
-            <el-button type="text" class="!text-[#686868]">查看更多评论</el-button>
+            <el-button @click="$router.push('/article-comment')" type="text" class="!text-[#686868]">{{ $t("查看更多评论") }}</el-button>
           </div>
-        </ui-shadow-box>
+        </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>
+      <van-action-sheet v-model="showShare"   >
+        <div class="h-334rem bg-[#fff] flex justify-around items-center">
+          <img @click="showShare = false" src="/imgs/h5-action-close.png"  class="w-32rem h-32rem absolute right-30rem top-30rem"/>
+          <div @click="() => {
+            showShare = false
+            exportVisible = true
+          }" class="flex flex-col items-center">
+            <img  src="/imgs/h5-share-post.png" class="w-70rem"/>
+            <div class="font-light text-size-30rem text-primary mt-23rem">
+              分享海报
+            </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 class="flex flex-col items-center">
+            <img src="/imgs/h5-share-link.png" class="w-70rem"/>
+            <div class="font-light text-size-30rem text-primary mt-23rem">
+              分享链接
+            </div>
           </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期刊") }}
+      </van-action-sheet>
+
+      <van-overlay :show="exportVisible">
+        <div class="w-screen h-full flex flex-col items-center justify-between ">
+          <div ref="post"
+            class="mt-24rem w-675rem h-1037rem  py-38rem flex flex-col items-center bg-white rounded-10rem px-45rem">
+            <div class=" text-primary text-size-36rem mb-72rem">
+              {{ $t("杂志期刊") }}
+            </div>
+            <img src="/imgs/export-cover.png" class="w-full h-328rem object-cover" />
+            <div class="text-size-30rem leading-42rem text-[#000A04] mt-28rem ">
+              这里是轮播图推荐内容标题这里是轮播图推荐内容标题...
+            </div>
+            <div class="text-size-30rem text-[#686868] leading-30rem mt-36rem font-light">
+              这里是文章简介内容这里是文章简介内容这里是文章简介内容这里是文章简介内容这里是文这里是文章简介内容这里是文章简介内容这里是文章简介内容这......
+            </div>
+            <div class="flex items-center w-full justify-end mt-74rem">
+              <div class="mr-10rem text-[#B8B8B8] text-size-14rem h-84rem flex flex-col justify-between">
+                <div class="mb-10rem">作者：香港特派员赵圆松</div>
+                <div class="text-right">时间：2022-08-26</div>
               </div>
+              <img src="/imgs/export-qrcode.png" class="w-120rem h-120rem" />
             </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 class="w-full h-200rem bg-white flex justify-center items-center relative">
+            <img @click="exportVisible = false" src="/imgs/h5-action-close.png"
+              class="w-32rem absolute top-30rem right-30rem" />
+            <div @click="exportPost"
+              class="w-600rem h-88rem bg-primary flex justify-center items-center rounded-full text-white">
+              {{ $t("保存海报") }}
+            </div>
           </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>
+
+      </van-overlay>
+      <div class="absolute left-0 bottom-0 h-88rem w-full bg-[#f7f7f7] flex items-center">
+        <div class="flex-1 flex pl-24rem items-center justify-between">
+          <img class="w-13rem " src="/imgs/comment-arrow-left.png" />
+          <van-field
+            class="flex items-center !p-0 !pl-24rem bg-transparentborder-1rem border-[#707070] border-solid !w-308rem h-60rem rounded-full bg-white">
+          </van-field>
         </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 class="flex items-center flex-1 justify-around">
+          <img src="/imgs/h5-message.png" class="w-37rem" />
+          <img src="/imgs/comment-collection.png" class="w-37rem" />
+          <img src="/imgs/comment-like.png" class="w-36rem" />
+          <img @click="showShare = true" src="/imgs/comment-share.png" class="w-41rem" />
         </div>
       </div>
-    </el-dialog>
-  </div>
+    </div>
+  </ui-page-layout>
 </template>
 
 <script>
@@ -241,95 +161,92 @@ 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 });
+
+      const url = await domtoimage.toPng(this.$refs.post, { filter: false });
 
       FileSaver.saveAs(url, "post.png");
     },
   },
   data() {
     return {
+      showShare:true,
       exportVisible: false,
       subscriped: true,
-      html: `<p><span style="font-size:16px">据央视新闻7月22日消息，俄罗斯国防部发言人科纳申科夫21日通报说，俄军在尼古拉耶夫和克拉玛托尔斯克打击了乌军多个指挥所。</span></p>
+      html: `<p><span style="font-size:16rem">据央视新闻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><span style="font-size:16rem"><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><span style="font-size:16rem">据央视新闻7月22日消息，俄罗斯国防部发言人科纳申科夫21日通报说，俄军在尼古拉耶夫和克拉玛托尔斯克打击了乌军多个指挥所。</span></p>
 
 <p>&nbsp;</p>
 
 <p>&nbsp;</p>
 
-<p><span style="font-size:16px">另据央视新闻报道称，当地时间21日，欧洲理事会公布了针对俄罗斯的新制裁措施，包括禁止进口来自俄罗斯金和珠宝；增加了俄罗斯可用于军用的物资和技术禁运清单，增加了对俄罗斯个人和实体的制裁。俄军打击乌军指挥所 乌军击退俄军进攻</span></p>
+<p><span style="font-size:16rem">另据央视新闻报道称，当地时间21日，欧洲理事会公布了针对俄罗斯的新制裁措施，包括禁止进口来自俄罗斯金和珠宝；增加了俄罗斯可用于军用的物资和技术禁运清单，增加了对俄罗斯个人和实体的制裁。俄军打击乌军指挥所 乌军击退俄军进攻</span></p>
 
 <p>&nbsp;</p>
 
 <p>&nbsp;</p>
 
-<p><span style="font-size:16px">俄罗斯国防部发言人科纳申科夫21日通报说，俄军在尼古拉耶夫和克拉玛托尔斯克打击了乌军多个指挥所，在顿涅茨克和尼古拉耶夫等地摧毁了多个乌军弹药库。另外，俄军还击落乌空军1架苏-25战机、1架米-8直升机和5架军用无人机。</span></p>
+<p><span style="font-size:16rem">俄罗斯国防部发言人科纳申科夫21日通报说，俄军在尼古拉耶夫和克拉玛托尔斯克打击了乌军多个指挥所，在顿涅茨克和尼古拉耶夫等地摧毁了多个乌军弹药库。另外，俄军还击落乌空军1架苏-25战机、1架米-8直升机和5架军用无人机。</span></p>
 
 <p>&nbsp;</p>
 
 <p>&nbsp;</p>
 
-<p><span style="font-size:16px">另据乌克兰国家通讯社21日援引乌各地军事部门的消息报道，俄军继续对苏梅、哈尔科夫、卢甘斯克、顿涅茨克等地区进行大规模炮击。在乌军阻击下，俄军未能在巴赫穆特方向取得突破，没有占领乌格列戈尔斯克发电厂。</span></p>
+<p><span style="font-size:16rem">另据乌克兰国家通讯社21日援引乌各地军事部门的消息报道，俄军继续对苏梅、哈尔科夫、卢甘斯克、顿涅茨克等地区进行大规模炮击。在乌军阻击下，俄军未能在巴赫穆特方向取得突破，没有占领乌格列戈尔斯克发电厂。</span></p>
 
 <p>&nbsp;</p>
 
 <p>&nbsp;</p>
 
-<p><span style="font-size:16px">俄外长称在乌军事目标发生变化，与西方向乌军提供武器有关。</span></p>
+<p><span style="font-size:16rem">俄外长称在乌军事目标发生变化，与西方向乌军提供武器有关。</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><span style="font-size:16rem"><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><span style="font-size:16rem">据央视新闻7月22日消息，俄罗斯国防部发言人科纳申科夫21日通报说，俄军在尼古拉耶夫和克拉玛托尔斯克打击了乌军多个指挥所。</span></p>
 
 <p>&nbsp;</p>
 
 <p>&nbsp;</p>
 
-<p><span style="font-size:16px">另据央视新闻报道称，当地时间21日，欧洲理事会公布了针对俄罗斯的新制裁措施，包括禁止进口来自俄罗斯金和珠宝；增加了俄罗斯可用于军用的物资和技术禁运清单，增加了对俄罗斯个人和实体的制裁。俄军打击乌军指挥所 乌军击退俄军进攻</span></p>
+<p><span style="font-size:16rem">另据央视新闻报道称，当地时间21日，欧洲理事会公布了针对俄罗斯的新制裁措施，包括禁止进口来自俄罗斯金和珠宝；增加了俄罗斯可用于军用的物资和技术禁运清单，增加了对俄罗斯个人和实体的制裁。俄军打击乌军指挥所 乌军击退俄军进攻</span></p>
 
 <p>&nbsp;</p>
 
 <p>&nbsp;</p>
 
-<p><span style="font-size:16px">俄罗斯国防部发言人科纳申科夫21日通报说，俄军在尼古拉耶夫和克拉玛托尔斯克打击了乌军多个指挥所，在顿涅茨克和尼古拉耶夫等地摧毁了多个乌军弹药库。另外，俄军还击落乌空军1架苏-25战机、1架米-8直升机和5架军用无人机。</span></p>
+<p><span style="font-size:16rem">俄罗斯国防部发言人科纳申科夫21日通报说，俄军在尼古拉耶夫和克拉玛托尔斯克打击了乌军多个指挥所，在顿涅茨克和尼古拉耶夫等地摧毁了多个乌军弹药库。另外，俄军还击落乌空军1架苏-25战机、1架米-8直升机和5架军用无人机。</span></p>
 
 <p>&nbsp;</p>
 
 <p>&nbsp;</p>
 
-<p><span style="font-size:16px">另据乌克兰国家通讯社21日援引乌各地军事部门的消息报道，俄军继续对苏梅、哈尔科夫、卢甘斯克、顿涅茨克等地区进行大规模炮击。在乌军阻击下，俄军未能在巴赫穆特方向取得突破，没有占领乌格列戈尔斯克发电厂。</span></p>
+<p><span style="font-size:16rem">另据乌克兰国家通讯社21日援引乌各地军事部门的消息报道，俄军继续对苏梅、哈尔科夫、卢甘斯克、顿涅茨克等地区进行大规模炮击。在乌军阻击下，俄军未能在巴赫穆特方向取得突破，没有占领乌格列戈尔斯克发电厂。</span></p>
 
 <p>&nbsp;</p>
 
 <p>&nbsp;</p>
 
-<p><span style="font-size:16px">俄外长称在乌军事目标发生变化，与西方向乌军提供武器有关。</span></p>
+<p><span style="font-size:16rem">俄外长称在乌军事目标发生变化，与西方向乌军提供武器有关。</span></p>
 
 <p>&nbsp;</p>
 
 <p>&nbsp;</p>
 
-<p><span style="font-size:16px">作者：香港特派员赵圆松；期刊：尖瑞科技期刊（ID：business-data）<br />
+<p><span style="font-size:16rem">作者：香港特派员赵圆松；期刊：尖瑞科技期刊（ID：business-data）<br />
 本文由 @商业数据派 原创发布于人人都是产品经理，未经许可，禁止转载。<br />
 题图来自 Unsplash，基于CC0协议</span></p>
 <p>&nbsp;</p>
@@ -342,14 +259,16 @@ export default {
 </script>
 
 <style>
-.detail .content {
-}
+.detail .content {}
+
 .detail .action-button {
-  @apply !font-light border-1px !border-primary border-solid !text-primary ml-30px;
+  @apply !font-light border-1rem !border-primary border-solid !text-primary ml-30rem;
 }
+
 .detail .action-button.done {
   @apply bg-primary !text-white;
 }
+
 .detail .el-textarea textarea {
   @apply h-full bg-[#F7F7F7];
 }

src/h5/pages/article-detail/comment.vue

@@ -0,0 +1,46 @@
+<template>
+    <ui-page-layout title="评论">
+        <div class="rem-30rem pt-37rem pb-108rem px-24rem bg-white">
+            <div class="text-size-30rem mb-16rem">全部评论</div>
+
+            <div v-for="item in 4" :key="item">
+                <div class="flex items-start py-30rem">
+                    <img class="w-60rem h-60rem round" src="/imgs/avatar.png" />
+                    <div class="mt-8rem ml-14rem">
+                        <div class="flex mb-14rem items-center">
+                            <div class=" text-size-30rem mr-30rem">用户名</div>
+                            <div class="text-size-24rem text-[#B8B8B8]">2022-08-26 06:53</div>
+                        </div>
+                        <div class="text-[#686868] leading-34rem text-size-24rem">
+                            评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容
+                        </div>
+                    </div>
+                </div>
+                <ui-devider></ui-devider>
+            </div>
+
+        </div>
+        <div class="absolute bottom-0 h-88rem w-full bg-[#f7f7f7] flex items-center">
+            <div class="flex-1 flex pl-24rem items-center justify-between">
+                <img class="w-13rem " src="/imgs/comment-arrow-left.png"/>
+                <van-field
+                    class="flex items-center !p-0 !pl-24rem bg-transparentborder-1rem border-[#707070] border-solid !w-308rem h-60rem rounded-full bg-white">
+                </van-field>
+            </div>
+
+            <div class="flex items-center flex-1 justify-around">
+                <img src="/imgs/h5-message.png" class="w-37rem" />
+                <img src="/imgs/comment-collection.png" class="w-37rem" />
+                <img src="/imgs/comment-like.png" class="w-36rem" />
+                <img src="/imgs/comment-share.png" class="w-41rem" />
+            </div>
+        </div>
+    </ui-page-layout>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+

src/h5/pages/auth/change-password.vue

@@ -1,115 +1,103 @@
 <template>
-  <div
-    class="w-1200px ml-auto mr-auto mt-100px m-h-624px bg-white flex forget overflow-hidden mb-0"
-  >
-    <div class="w-700px h-full">
-      <img src="/imgs/login-banner.png" class="w-full object-cover" />
-    </div>
-
-    <div class="flex-1 flex justify-center">
-      <el-tabs v-model="activeName" class="w-410px mt-50px first">
-        <el-tab-pane class="tab-pane" :label="$t('修改密码')" name="first">
-          <div>
-            <ui-input class="h-60px !w-400px mb-24px" :placeholder="$t('请输入邮箱号码')">
-              <div slot="prefix" class="flex items-center h-full ml-20px">
-                <img slot="prefix" src="/imgs/email_icon.png" class="w-30px h-auto" />
-              </div>
-            </ui-input>
-            <ui-input class="h-60px !w-400px mb-24px" :placeholder="$t('请输入账号密码')">
-              <div slot="prefix" class="flex items-center h-full ml-20px">
-                <img src="/imgs/password_icon.png" class="w-30px h-auto" />
-              </div>
-              <div slot="suffix" class="flex items-center h-full mr-20px">
-                <img src="/imgs/eye_icon.png" class="w-30px h-auto" />
-                <!-- <img src="/imgs/eye_close_icon.png" class="w-30px h-auto" /> -->
-              </div>
-            </ui-input>
-            <ui-input
-              class="h-60px !w-400px mb-24px"
-              :placeholder="$t('请再次输入账号密码')"
-            >
-              <div slot="prefix" class="flex items-center h-full ml-20px">
-                <img src="/imgs/password_icon.png" class="w-30px h-auto" />
-              </div>
-              <div slot="suffix" class="flex items-center h-full mr-20px">
-                <img src="/imgs/eye_icon.png" class="w-30px h-auto" />
-                <!-- <img src="/imgs/eye_close_icon.png" class="w-30px h-auto" /> -->
-              </div>
-            </ui-input>
-            <ui-input
-              class="h-60px !w-400px mb-24px"
-              :placeholder="$t('请输入邮箱验证码')"
-            >
-              <div slot="prefix" class="flex items-center h-full ml-20px">
-                <img src="/imgs/vcode_icon.png" class="w-30px h-auto" />
-              </div>
-
-              <div slot="suffix" class="flex items-center h-full">
-                <el-button
-                  class="h-40px w-120px !text-size-14px !font-normal !px-0"
-                  type="primary"
-                  round
-                  >{{ $t("获取邮箱验证码") }}</el-button
-                >
-              </div>
-            </ui-input>
-
-            <div class="text-size-14px pl-30px mb-39px">
-              按下【完成注册】，即表示您同意<span class="text-primary cursor-pointer"
-                >用户注册协议</span
-              >
-            </div>
-            <el-button
-              class="h-60px w-400px !rounded-50px !text-size-24px !font-normal"
-              type="primary"
-              round
-              disabled
-              >{{ $t("完成注册") }}</el-button
-            >
+  <ui-page-layout class="bg-white" :showLeft="false" title="设置密码">
+
+      <div>
+          <img class="w-full h-520rem " src="/imgs/h5-login-banner.png" />
+      </div>
+      <div class="h-58rem">
+
+      </div>
+      <div class="flex flex-col items-center  bg-white login overflow-hidden">
+
+
+          <div  class="flex flex-col items-center">
+              
+              <ui-input class="!h-98rem !w-600rem mb-24rem" :placeholder="$t('请输入邮箱号码')">
+                  <div slot="prefix" class="flex items-center h-full ml-20rem">
+                      <img slot="prefix" src="/imgs/email_icon.png" class="w-37rem h-auto" />
+                  </div>
+              </ui-input>
+              <ui-input class="!h-98rem !w-600rem mb-24rem" :placeholder="$t('请输入新密码')">
+                  <div slot="prefix" class="flex items-center h-full ml-20rem">
+                      <img slot="prefix" src="/imgs/password_icon.png" class="w-40rem h-auto" />
+                  </div>
+              </ui-input>
+              <ui-input class="!h-98rem !w-600rem mb-24rem" :placeholder="$t('请再次输入新密码')">
+                  <div slot="prefix" class="flex items-center h-full ml-20rem">
+                      <img slot="prefix" src="/imgs/password_icon.png" class="w-40rem h-auto" />
+                  </div>
+              </ui-input>
+              <ui-input class="!h-98rem !w-600rem mb-24rem " :placeholder="$t('请输入邮箱验证码')">
+                  <div slot="prefix" class="flex items-center h-full ml-20rem">
+                      <img src="/imgs/vcode_icon.png" class="w-40rem h-auto" />
+                  </div>
+
+                  <div slot="suffix" class="flex items-center h-full">
+                      <div class="bg-primary rounded-full text-white flex justify-center items-center h-70rem w-200rem !text-size-30rem !font-light !px-0"
+                          type="primary" round>{{
+                                  $t("获取验证码")
+                          }}</div>
+                  </div>
+              </ui-input>
+              
           </div>
-        </el-tab-pane>
-      </el-tabs>
-    </div>
-  </div>
+
+
+          <el-button class="h-88rem w-600rem !rounded-full !text-size-24rem !font-normal" type="primary" round>{{
+                  $t("登录")
+          }}</el-button>
+
+      </div>
+  </ui-page-layout>
 </template>
 
 <script>
 export default {
   data() {
-    return {
-      activeName: "first",
-      loginType: "email",
-    };
+      return {
+          activeName: "first",
+          loginType: "email",
+      };
   },
 };
 </script>
 
 <style>
-.forget .el-input__inner {
+.login .el-input__inner {
   background: #f7f7f7;
-  font-size: 16px;
-  padding-left: 60px !important;
+  font-size: 30rem;
+  padding-left: 100rem !important;
 }
-.forget .tab-pane {
-  @apply flex flex-col items-center pt-10px;
+
+.login .tab-pane {
+  @apply flex flex-col items-center pt-10rem;
 }
-.forget .el-tabs__nav {
+
+.login .el-tabs__nav {
   @apply !w-full;
 }
 
-.forget
-  .first
-  > .el-tabs__header
-  > .el-tabs__nav-wrap
-  > .el-tabs__nav-scroll
-  > .el-tabs__nav
-  > .el-tabs__item {
-  @apply text-size-24px font-normal !w-full text-center !px-0;
+.login .first>.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-scroll>.el-tabs__nav>.el-tabs__item {
+  @apply text-size-24rem font-normal !w-1/2 text-center !rem-0;
 }
-.forget .el-tabs .el-tabs__item.is-active {
-  @apply !text-size-36px font-normal;
+
+.login .el-tabs .el-tabs__item.is-active {
+  @apply !text-size-36rem font-normal;
 }
-.forget .el-tabs .el-tabs__active-bar {
-  @apply !w-1/2 transform last:translate-x-1/2;
+
+.login .custom-tab {
+  @apply flex-1 flex justify-center items-center bg-[#F7F7F7] text-size-30rem cursor-pointer;
+}
+
+.login .custom-tab.select {
+  @apply bg-white text-primary;
+}
+
+.login .custom-tab:first-child {
+  @apply border-r-1rem border-solid border-r-[#E7E7E7] rounded-l-full;
+}
+
+.login .custom-tab:nth-child(2) {
+  @apply border-r-1rem border-solid border-r-[#E7E7E7] rounded-r-full;
 }
 </style>

src/h5/pages/auth/login.vue

@@ -1,143 +1,75 @@
 <template>
-  <div
-    class="w-1200px ml-auto mr-auto mt-100px m-h-624px bg-white flex login overflow-hidden mb-0"
-  >
-    <div class="w-700px h-full">
-      <img src="/imgs/login-banner.png" class="w-full object-cover" />
+  <ui-page-layout class="bg-white" :showLeft="false" title="登录">
+
+    <div>
+      <img class="w-full h-520rem " src="/imgs/h5-login-banner.png" />
     </div>
+    <div class="h-58rem">
 
-    <div class="flex-1 flex justify-center">
-      <el-tabs
-        v-model="activeName"
-        @tab-click="handleClick"
-        class="w-410px mt-50px first"
-      >
-        <el-tab-pane :label="$t('登录')" name="first" class="tab-pane">
-          <div
-            class="w-400px h-38px rounded-full border-[#E7E7E7] border-1px border-solid mb-24px flex"
-          >
-            <div
-              @click="loginType = 'email'"
-              :class="`custom-tab ${loginType === 'email' ? 'select' : ''}`"
-            >
-              {{ $t("邮箱验证登录") }}
-            </div>
+    </div>
+    <div class="flex flex-col items-center  bg-white login overflow-hidden">
+
+      <div class="w-400rem h-56rem rounded-full border-[#E7E7E7] border-1rem border-solid mb-60rem flex">
+        <div @click="loginType = 'email'" :class="`custom-tab ${loginType === 'email' ? 'select' : ''}`">
+          {{ $t("邮箱验证登录") }}
+        </div>
+        <div @click="loginType = 'account'" :class="`custom-tab ${loginType === 'account' ? 'select' : ''}`">
+          {{ $t("账号密码登录") }}
+        </div>
+      </div>
+      <div v-if="loginType === 'email'" class="flex flex-col items-center">
+        <ui-input class="!h-98rem !w-600rem mb-60rem" :placeholder="$t('请输入邮箱号码')">
+          <div slot="prefix" class="flex items-center h-full ml-20rem">
+            <img slot="prefix" src="/imgs/email_icon.png" class="w-37rem h-auto" />
+          </div>
+        </ui-input>
+        <ui-input class="!h-98rem !w-600rem mb-60rem " :placeholder="$t('请输入邮箱验证码')">
+          <div slot="prefix" class="flex items-center h-full ml-20rem">
+            <img src="/imgs/vcode_icon.png" class="w-40rem h-auto" />
+          </div>
+
+          <div slot="suffix" class="flex items-center h-full">
             <div
-              @click="loginType = 'account'"
-              :class="`custom-tab ${loginType === 'account' ? 'select' : ''}`"
-            >
-              {{ $t("账号密码登录") }}
-            </div>
+              class="bg-primary rounded-full text-white flex justify-center items-center h-70rem w-200rem !text-size-30rem !font-light !px-0"
+              type="primary" round>{{
+                  $t("获取验证码")
+              }}</div>
           </div>
-          <div v-if="loginType === 'email'">
-            <ui-input class="h-60px !w-400px mb-24px" :placeholder="$t('请输入邮箱号码')">
-              <div slot="prefix" class="flex items-center h-full ml-20px">
-                <img slot="prefix" src="/imgs/email_icon.png" class="w-30px h-auto" />
-              </div>
-            </ui-input>
-            <ui-input
-              class="h-60px !w-400px mb-58px"
-              :placeholder="$t('请输入邮箱验证码')"
-            >
-              <div slot="prefix" class="flex items-center h-full ml-20px">
-                <img src="/imgs/vcode_icon.png" class="w-30px h-auto" />
-              </div>
-
-              <div slot="suffix" class="flex items-center h-full">
-                <el-button
-                  class="h-40px w-120px !text-size-14px !font-normal !px-0"
-                  type="primary"
-                  round
-                  >{{ $t("获取邮箱验证码") }}</el-button
-                >
-              </div>
-            </ui-input>
+        </ui-input>
+      </div>
+      <div v-if="loginType === 'account'" class="flex flex-col items-end">
+        <ui-input class="!h-98rem !w-600rem mb-60rem" :placeholder="$t('请输入账号')">
+          <div slot="prefix" class="flex items-center h-full ml-20rem">
+            <img slot="prefix" src="/imgs/email_icon.png" class="w-37rem h-auto" />
           </div>
-          <div v-if="loginType === 'account'" class="flex flex-col items-end">
-            <ui-input class="h-60px !w-400px mb-24px" :placeholder="$t('请输入账号')">
-              <div slot="prefix" class="flex items-center h-full ml-20px">
-                <img slot="prefix" src="/imgs/email_icon.png" class="w-30px h-auto" />
-              </div>
-            </ui-input>
-            <ui-input class="h-60px !w-400px mb-15px" :placeholder="$t('请输入账号密码')">
-              <div slot="prefix" class="flex items-center h-full ml-20px">
-                <img src="/imgs/password_icon.png" class="w-30px h-auto" />
-              </div>
-              <div slot="suffix" class="flex items-center h-full mr-20px">
-                <!-- <img src="/imgs/eye_icon.png" class="w-30px h-auto" /> -->
-                <img
-                  src="/imgs/eye_close_icon.png"
-                  class="w-30px h-auto cursor-pointer"
-                />
-              </div>
-            </ui-input>
-            <el-button
-              @click="$router.push('/change-pass')"
-              type="text"
-              class="!font-normal !mb-27px !p-0"
-            >
-              {{ $t("忘记密码") }}
-            </el-button>
+        </ui-input>
+        <ui-input class="!h-98rem !w-600rem mb-15rem" :placeholder="$t('请输入账号密码')">
+          <div slot="prefix" class="flex items-center h-full ml-20rem">
+            <img src="/imgs/password_icon.png" class="w-40rem h-auto" />
           </div>
-
-          <el-button
-            class="h-60px w-400px !rounded-50px !text-size-24px !font-normal"
-            type="primary"
-            round
-            >{{ $t("登录") }}</el-button
-          >
-        </el-tab-pane>
-        <el-tab-pane class="tab-pane" :label="$t('注册')" name="second">
-          <div>
-            <ui-input class="h-60px !w-400px mb-24px" :placeholder="$t('请输入昵称')">
-              <div slot="prefix" class="flex items-center h-full ml-20px">
-                <img slot="prefix" src="/imgs/user_icon.png" class="w-30px h-auto" />
-              </div>
-            </ui-input>
-            <ui-input class="h-60px !w-400px mb-24px" :placeholder="$t('请输入邮箱号码')">
-              <div slot="prefix" class="flex items-center h-full ml-20px">
-                <img slot="prefix" src="/imgs/email_icon.png" class="w-30px h-auto" />
-              </div>
-            </ui-input>
-            <ui-input
-              class="h-60px !w-400px mb-24px"
-              :placeholder="$t('请输入邮箱验证码')"
-            >
-              <div slot="prefix" class="flex items-center h-full ml-20px">
-                <img src="/imgs/vcode_icon.png" class="w-30px h-auto" />
-              </div>
-
-              <div slot="suffix" class="flex items-center h-full">
-                <el-button
-                  class="h-40px w-120px !text-size-14px !font-normal !px-0"
-                  type="primary"
-                  round
-                  >{{ $t("获取邮箱验证码") }}</el-button
-                >
-              </div>
-            </ui-input>
-            <ui-input class="h-60px !w-400px mb-15px" :placeholder="$t('请输入账号密码')">
-              <div slot="prefix" class="flex items-center h-full ml-20px">
-                <img src="/imgs/password_icon.png" class="w-30px h-auto" />
-              </div>
-              <div slot="suffix" class="flex items-center h-full mr-20px">
-                <img src="/imgs/eye_icon.png" class="w-30px h-auto" />
-                <!-- <img src="/imgs/eye_close_icon.png" class="w-30px h-auto" /> -->
-              </div>
-            </ui-input>
-
-            <el-button
-              class="h-60px w-400px !rounded-50px !text-size-24px !font-normal"
-              type="primary"
-              round
-              disabled
-              >{{ $t("确定") }}</el-button
-            >
+          <div slot="suffix" class="flex items-center h-full mr-20rem">
+            <!-- <img src="/imgs/eye_icon.png" class="w-30rem h-auto" /> -->
+            <img src="/imgs/eye_close_icon.png" class="w-40rem h-auto cursor-pointer" />
           </div>
-        </el-tab-pane>
-      </el-tabs>
+        </ui-input>
+        <el-button @click="$router.push('/change-pass')" type="text" class="!font-normal !mb-27rem !p-0">
+          {{ $t("忘记密码") }}
+        </el-button>
+      </div>
+
+      <el-button @click="$router.push('/home')" class="h-88rem w-600rem !rounded-full !text-size-24rem !font-normal" type="primary" round>{{
+          $t("登录")
+      }}</el-button>
+      <div @click="$router.push('/register')" class="mt-30rem">
+        <span class="text-[#B8B8B8]">
+          还没有账号， 点击
+        </span><span class="text-primary">
+          注册
+        </span>
+      </div>
+
     </div>
-  </div>
+  </ui-page-layout>
 </template>
 
 <script>
@@ -154,38 +86,39 @@ export default {
 <style>
 .login .el-input__inner {
   background: #f7f7f7;
-  font-size: 16px;
-  padding-left: 60px !important;
+  font-size: 30rem;
+  padding-left: 100rem !important;
 }
+
 .login .tab-pane {
-  @apply flex flex-col items-center pt-10px;
+  @apply flex flex-col items-center pt-10rem;
 }
+
 .login .el-tabs__nav {
   @apply !w-full;
 }
 
-.login
-  .first
-  > .el-tabs__header
-  > .el-tabs__nav-wrap
-  > .el-tabs__nav-scroll
-  > .el-tabs__nav
-  > .el-tabs__item {
-  @apply text-size-24px font-normal !w-1/2 text-center !px-0;
+.login .first>.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-scroll>.el-tabs__nav>.el-tabs__item {
+  @apply text-size-24rem font-normal !w-1/2 text-center !rem-0;
 }
+
 .login .el-tabs .el-tabs__item.is-active {
-  @apply !text-size-36px font-normal;
+  @apply !text-size-36rem font-normal;
 }
+
 .login .custom-tab {
-  @apply flex-1 flex justify-center items-center bg-[#F7F7F7] text-size-16px cursor-pointer;
+  @apply flex-1 flex justify-center items-center bg-[#F7F7F7] text-size-30rem cursor-pointer;
 }
+
 .login .custom-tab.select {
   @apply bg-white text-primary;
 }
+
 .login .custom-tab:first-child {
-  @apply border-r-1px border-solid border-r-[#E7E7E7] rounded-l-full;
+  @apply border-r-1rem border-solid border-r-[#E7E7E7] rounded-l-full;
 }
+
 .login .custom-tab:nth-child(2) {
-  @apply border-r-1px border-solid border-r-[#E7E7E7] rounded-r-full;
+  @apply border-r-1rem border-solid border-r-[#E7E7E7] rounded-r-full;
 }
 </style>

src/h5/pages/auth/register.vue

@@ -0,0 +1,102 @@
+<template>
+    <ui-page-layout class="bg-white" :showLeft="false" title="注册">
+
+        <div>
+            <img class="w-full h-520rem " src="/imgs/h5-login-banner.png" />
+        </div>
+        <div class="h-58rem">
+
+        </div>
+        <div class="flex flex-col items-center  bg-white login overflow-hidden">
+
+
+            <div  class="flex flex-col items-center">
+                <ui-input class="!h-98rem !w-600rem mb-24rem" :placeholder="$t('请输入昵称')">
+                    <div slot="prefix" class="flex items-center h-full ml-20rem">
+                        <img slot="prefix" src="/imgs/user_icon.png" class="w-42rem h-auto" />
+                    </div>
+                </ui-input>
+                <ui-input class="!h-98rem !w-600rem mb-24rem" :placeholder="$t('请输入邮箱号码')">
+                    <div slot="prefix" class="flex items-center h-full ml-20rem">
+                        <img slot="prefix" src="/imgs/email_icon.png" class="w-37rem h-auto" />
+                    </div>
+                </ui-input>
+                <ui-input class="!h-98rem !w-600rem mb-24rem " :placeholder="$t('请输入邮箱验证码')">
+                    <div slot="prefix" class="flex items-center h-full ml-20rem">
+                        <img src="/imgs/vcode_icon.png" class="w-40rem h-auto" />
+                    </div>
+
+                    <div slot="suffix" class="flex items-center h-full">
+                        <div class="bg-primary rounded-full text-white flex justify-center items-center h-70rem w-200rem !text-size-30rem !font-light !px-0"
+                            type="primary" round>{{
+                                    $t("获取验证码")
+                            }}</div>
+                    </div>
+                </ui-input>
+                <ui-input class="!h-98rem !w-600rem mb-24rem" :placeholder="$t('请设置密码')">
+                    <div slot="prefix" class="flex items-center h-full ml-20rem">
+                        <img slot="prefix" src="/imgs/password_icon.png" class="w-40rem h-auto" />
+                    </div>
+                </ui-input>
+            </div>
+
+
+            <el-button class="h-88rem w-600rem !rounded-full !text-size-24rem !font-normal" type="primary" round>{{
+                    $t("登录")
+            }}</el-button>
+
+        </div>
+    </ui-page-layout>
+</template>
+  
+<script>
+export default {
+    data() {
+        return {
+            activeName: "first",
+            loginType: "email",
+        };
+    },
+};
+</script>
+  
+<style>
+.login .el-input__inner {
+    background: #f7f7f7;
+    font-size: 30rem;
+    padding-left: 100rem !important;
+}
+
+.login .tab-pane {
+    @apply flex flex-col items-center pt-10rem;
+}
+
+.login .el-tabs__nav {
+    @apply !w-full;
+}
+
+.login .first>.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-scroll>.el-tabs__nav>.el-tabs__item {
+    @apply text-size-24rem font-normal !w-1/2 text-center !rem-0;
+}
+
+.login .el-tabs .el-tabs__item.is-active {
+    @apply !text-size-36rem font-normal;
+}
+
+.login .custom-tab {
+    @apply flex-1 flex justify-center items-center bg-[#F7F7F7] text-size-30rem cursor-pointer;
+}
+
+.login .custom-tab.select {
+    @apply bg-white text-primary;
+}
+
+.login .custom-tab:first-child {
+    @apply border-r-1rem border-solid border-r-[#E7E7E7] rounded-l-full;
+}
+
+.login .custom-tab:nth-child(2) {
+    @apply border-r-1rem border-solid border-r-[#E7E7E7] rounded-r-full;
+}
+</style>
+  

src/h5/pages/home/_components/home-new.vue

@@ -1,7 +1,7 @@
 <template>
-  <ui-shadow-box class="relative h-50px flex items-center pl-16.5px">
-    <div class="w-158px h-3px absolute left-0 top--3px bg-primary rounded-full"></div>
-    <img class="w-36px mr-6.5px" src="/imgs/new.png" />
-    <div class="font-thin text-[#000] text-size-20px">{{ $t("最新文章") }}</div>
-  </ui-shadow-box>
+  <div class="relative h-50rem flex items-center pl-16.5rem">
+    
+    <img class="w-47rem mr-12rem" src="/imgs/new.png" />
+    <div class="font-thin text-[#000] text-size-30rem font-400">{{ $t("最新文章") }}</div>
+  </div>
 </template>

src/h5/pages/home/home.vue

@@ -1,111 +1,94 @@
 <template>
-  <div class="w-1200px">
-    <div class="h-20px"></div>
-
-    <div class="flex">
-      <div>
-        <ui-swiper
-          :showPagination="true"
-          :items="banner1"
-          class="w-600px h-337px"
-        ></ui-swiper>
-      </div>
-      <div class="w-10px"></div>
-      <div class="swiper-group">
-        <ui-swiper :items="banner1" titleClass="swiper-title" class="swiper"></ui-swiper>
-        <ui-swiper :items="banner1" titleClass="swiper-title" class="swiper"></ui-swiper>
-        <ui-swiper :items="banner1" titleClass="swiper-title" class="swiper"></ui-swiper>
-        <ui-swiper :items="banner1" titleClass="swiper-title" class="swiper"></ui-swiper>
-      </div>
-    </div>
-    <div class="h-20px"></div>
-    <div class="flex justify-between">
-      <div class="left w-860px">
-        <home-tags></home-tags>
-        <div class="h-20px"></div>
-        <home-new></home-new>
-        <div class="h-20px"></div>
-        <div v-for="item in 8" :key="item">
-          <ui-main-article></ui-main-article>
-          <div class="h-20px"></div>
-        </div>
+
+  <ui-page-layout :showLeft="false" title="杂志期刊">
+    <template v-slot:search>
+      <div class=" flex justify-center pb-22rem">
+        <van-field class="!w-702rem !h-70rem !p-0 !rounded-full">
+          <template v-slot:left-icon>
+            <div class="h-full w-full flex justify-center items-center">
+              <img src="/imgs/h5-search-icon.png" class="w-36rem ml-24rem" />
+            </div>
+          </template>
+        </van-field>
       </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>
+    </template>
+    <ui-scroll-view>
+      <van-tabs v-model="active" background="#FFFFFF" color="#124026" class="h-full">
+        <van-tab :title="$t('首页')" class="h-full flex-1">
+          <div class="px-24rem pt-12rem">
+            <div>
+              <ui-swiper :showPagination="true" :items="banner1" class="w-full h-390rem"></ui-swiper>
+            </div>
+            <div class="flex justify-around mt-24rem mb-24rem">
+              <div class="type-item">
+                <img class="w-68rem h-68rem object-contain" src="/imgs/recommend-type.png" />
+                <div>首页</div>
+              </div>
+              <div @click="$router.push('/realtime-news')" class="type-item">
+                <img class="w-68rem h-68rem object-contain" src="/imgs/news-type.png" />
+                <div>实时新闻</div>
+              </div>
+              <div @click="$router.push('/hot')" class="type-item">
+                <img class="w-68rem h-68rem object-contain" src="/imgs/hot-type.png" />
+                <div>热榜文章</div>
+              </div>
+              <div @click="$router.push('/vip')" class="type-item">
+                <img class="w-68rem h-68rem object-contain" src="/imgs/vip-type.png" />
+                <div>VIP周刊</div>
+              </div>
+            </div>
+            <div class="home-pics-group mb-32rem">
+
+
+
+              <ui-mask-picture class="h-192rem"></ui-mask-picture>
+              <ui-mask-picture class="h-192rem"></ui-mask-picture>
+              <ui-mask-picture class="h-192rem"></ui-mask-picture>
+              <ui-mask-picture class="h-192rem"></ui-mask-picture>
+
+
+            </div>
+            <home-new></home-new>
+            <div class="h-24rem"></div>
+            <UiMainArticle v-for="index in 8"></UiMainArticle>
+            <div class="home-pics-group mb-32rem">
+
+
+
+              <ui-mask-picture class="h-192rem"></ui-mask-picture>
+              <ui-mask-picture class="h-192rem"></ui-mask-picture>
+              <ui-mask-picture class="h-192rem"></ui-mask-picture>
+              <ui-mask-picture class="h-192rem"></ui-mask-picture>
+
+
             </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>
+            <UiMainArticle v-for="index in 8"></UiMainArticle>
+            <img src="/imgs/split-pic-2.png" />
+            <UiMainArticle v-for="index in 8"></UiMainArticle>
           </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 4" :key="item">
-            <ui-vip-article></ui-vip-article>
-            <ui-devider></ui-devider>
+        </van-tab>
+        <van-tab :key="index" v-for="index in 10" :title="'标签 ' + index" class="h-full flex-1">
+          <div class="px-24rem pt-12rem">
+
+
+
+
+            <UiMainArticle v-for="index in 18"></UiMainArticle>
+
           </div>
-        </div>
-      </div>
-    </div>
-  </div>
+        </van-tab>
+      </van-tabs>
+    </ui-scroll-view>
+
+  </ui-page-layout>
 </template>
 
 <script>
 export default {
   data() {
     return {
+      active: 0,
       banner1: [
         { url: "/imgs/banner1.png", title: "這裏是輪播圖推薦內容標題" },
         { url: "/imgs/banner1.png", title: "這裏是輪播圖推薦內容標題" },
@@ -118,19 +101,41 @@ export default {
 };
 </script>
 <style>
+.type-item {
+  @apply flex flex-col items-center text-size-24rem;
+}
+
+.type-item>img {
+  @apply mb-16rem;
+}
+
 .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;
 }
+
+.van-tabs__content {
+  @apply h-full;
+}
+
+.home-pics-group {
+  display: grid;
+  grid-row-gap: 10rem;
+  grid-column-gap: 10rem;
+  grid-template-columns: repeat(2, 1fr);
+
+}
 </style>

src/h5/pages/hot/hot.vue

@@ -0,0 +1,45 @@
+<template>
+    <ui-page-layout title="热榜文章">
+
+
+
+        <UiMainArticle v-for="index in 8"></UiMainArticle>
+
+    </ui-page-layout>
+</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/h5/pages/product/_components/order-detail-info-item.vue

@@ -0,0 +1,17 @@
+<template>
+    <div class="flex justify-between items-center mb-36rem">
+        <div class="text-size-30rem text-black ">
+            {{ $t(label) }}
+        </div>
+        <div class="text-size-30rem text-[#686868] font-300">
+            {{value || '--'}}
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props:['label','value']
+}
+</script>
+

src/h5/pages/product/order-confirm.vue

@@ -0,0 +1,111 @@
+<template>
+    <ui-page-layout title="确认订单">
+        <div class="p-24rem">
+
+            <div class="bg-white pb-84rem rounded-10rem">
+
+                <van-field label-width="300rem" label-class="text-size-36rem text-[#282828]" label="购买人信息">
+
+                    <template v-slot:input>
+                        <div></div>
+                    </template>
+                </van-field>
+                <van-field :label="$t('收货人')" :value="name"></van-field>
+                <van-field :label="$t('收货电话')" :value="phone"></van-field>
+                <van-field type="textarea" :value="addr" :label="$t('收货地址')"></van-field>
+
+                <van-field label-width="300rem" label-class="text-size-36rem text-[#282828]" :label="$t('商品信息')">
+
+                    <template v-slot:input>
+                        <div></div>
+                    </template>
+                </van-field>
+                <div class="h-150rem flex mb-68rem px-4.26667vw">
+                    <img src="/imgs/article_cover_small1.png" class="w-150rem h-150rem object-cover" />
+                    <div class="ml-20rem flex flex-col justify-between">
+                        <div class="text-size-30rem">
+                            这里是产品名称这里是产品名称这里是产品名称
+                        </div>
+                        <div class="flex justify-between items-center">
+                            <div class="text-size-30rem text-primary font-light">¥79</div>
+                            <div class="text-size-30rem text-[#686868] font-light">
+                                <div class="flex h-40rem input-number ">
+                                    <div class="w-40rem bg-[#F7F7F7] flex justify-center items-center">-</div>
+                                    <div class="w-80rem">
+                                        <van-field center class="!p-0  !h-40rem"></van-field>
+                                    </div>
+                                    <div class="w-40rem bg-[#F7F7F7] flex justify-center items-center">+</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+        <div
+            class="absolute w-full bottom-0 h-98rem border-t-1rem border-solid border-[#D8D8D8] flex justify-around items-center">
+            <div>
+                <span class="text-size-30rem text-[#686868] ">共1件 </span>
+                <span class="text-size-30rem text-[#282828] ">合计：</span>
+                <span class="text-size-48rem text-primary">¥79.00</span>
+
+            </div>
+            <div @click="show = true"
+                class="rounded-full flex items-center justify-center w-237rem h-70rem bg-primary text-white text-size-30rem">
+                提交订单
+            </div>
+        </div>
+
+        <van-action-sheet v-model="show">
+            <div class="h-859rem w-full bg-[#F7F7F7] flex flex-col items-center relative">
+                <img @click="show = false" src="/imgs/h5-action-close.png"
+                    class="w-31rem absolute right-23rem top-33rem" />
+                <div class="text-size-30rem text-primary absolute top-91rem ">
+                    月会员 30天
+                </div>
+                <div class="text-size-100rem text-primary absolute top-158rem ">
+                    <span class="text-size-60rem">￥</span>
+                    79.00
+                </div>
+                <div class="h-326rem"></div>
+                <div
+                    class="text-[#FF0000] w-654rem h-100rem bg-white rounded-30rem text-size-30rem font-300 flex justify-center items-center mb-24rem">
+                    支付方式1
+                </div>
+                <div
+                    class="w-654rem h-100rem bg-white rounded-30rem text-size-30rem font-300 flex justify-center items-center mb-24rem">
+                    支付方式2
+                </div>
+                <div
+                    class=" font-300 w-600rem h-88rem bg-primary rounded-full text-white text-size-30 flex justify-center items-center absolute bottom-88rem">
+                    确认交易
+                </div>
+
+            </div>
+        </van-action-sheet>
+
+    </ui-page-layout>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            show: false,
+
+
+            name: '陈小婷',
+            phone: '18926145786',
+            addr: '广州市黄埔区联和街道黄埔科学大道112号绿地广场1710室'
+        }
+    }
+}
+</script>
+
+<style >
+.input-number .van-field__body input {
+    text-align: center;
+    font-size: 20rem;
+}
+</style>

src/h5/pages/product/order-detail.vue

@@ -1,76 +1,56 @@
 <template>
-  <div>
-    <div class="w-1200px bg-white mt-20px flex justify-center min-h-936px">
-      <div class="w-1000px">
-        <div class="mb-20px text-size-16px mt-30px">{{ $t("购买人信息") }}</div>
-
-        <ui-devider></ui-devider>
-        <div class="mt-50px flex items-center">
-          <div class="w-100px mr-25px">{{ $t("收货人") }}</div>
-          <ui-input :placeholder="$t('请输入收货人')" class="!w-444px"></ui-input>
+  <ui-page-layout title="订单详情">
+    <div class="px-24rem py-24rem">
+      <div class="rounded-10rem bg-white pt-34rem pl-34rem pr-24rem pb-24rem mb-24rem">
+        <div class="flex items-center mb-30rem">
+          <div class="text-size-36rem text-black ">
+            陈小婷
+          </div>
+          <div class="text-size-30rem text-[#686868] ml-10rem font-light">
+            18926171456
+          </div>
         </div>
-        <div class="mt-50px flex items-center">
-          <div class="w-100px mr-25px">{{ $t("收货电话") }}</div>
-          <ui-input :placeholder="$t('请输入收货电话')" class="!w-587px"></ui-input>
+        <div class="text-size-30rem text-[#686868] font-light leading-42rem">
+          广州市黄埔区联和街道黄埔科学大道112号绿地广场1710室
         </div>
 
-        <div class="mt-50px flex items-center">
-          <div class="w-100px mr-25px">{{ $t("收货地址") }}</div>
-          <ui-input :placeholder="$t('请输入收货地址')" class="!w-912px"></ui-input>
-        </div>
-        <div class="mb-20px text-size-16px mt-50px">{{ $t("商品信息") }}</div>
-
-        <ui-devider class="mb-30px"></ui-devider>
-        <div class="px-24px pb-24px bg-[#F7F7F7] relative">
-          <div
-            class="order-header h-52px flex items-center text-[#686868] text-size-14px"
-          >
-            <div class="w-100px text-center">产品图</div>
-            <div class="w-300px text-center">产品名称</div>
-            <div class="flex-1 text-center">单价</div>
-            <div class="flex-1 text-center">数量</div>
-            <div class="flex-1 text-center">小计</div>
-          </div>
-          <ui-devider class="bg-[#B8B8B8]"></ui-devider>
-          <div class="order-body flex mt-30px items-center relative">
-            <img src="/imgs/product_item.png" class="w-100px h-100px object-contain" />
-            <div class="w-300px text-center text-size-16px">这里是产品名称</div>
-            <div class="flex-1 text-center font-thin text-size-16px">79.00</div>
-            <div class="flex-1 text-center">
-              <el-input-number
-                v-model="num"
-                @change="handleChange"
-                :min="1"
-                :max="10"
-                label="描述文字"
-              ></el-input-number>
+      </div>
+      <!-- <div class=" h-100rem px-34rem flex justify-between items-center mb-24rem text-size-30rem bg-white rounded-10rem">
+        <div>月会员</div>
+        <div class="text-[#686868]">30天</div>
+        <div class="text-primary font-light">¥99</div>
+      </div> -->
+      <div class="pt-46rem pl-34rem pr-26rem bg-white rounded-10rem pb-105rem">
+        <div class="h-150rem flex mb-68rem">
+          <img src="/imgs/article_cover_small1.png" class="w-150rem h-150rem object-cover" />
+          <div class="ml-20rem flex flex-col justify-between">
+            <div class="text-size-30rem">
+              这里是产品名称这里是产品名称这里是产品名称
+            </div>
+            <div class="flex justify-between items-center">
+              <div class="text-size-30rem text-primary font-light">¥79</div>
+              <div class="text-size-30rem text-[#686868] font-light">x1</div>
             </div>
-            <div class="flex-1 text-center font-thin text-size-16px">79.00</div>
           </div>
         </div>
-        <div
-          class="mt-20px w-380px h-210px border-1px border-primary border-solid rounded-3px ml-auto pr-32px pt-24px flex flex-col items-end"
-        >
-          <div class="flex items-end mb-28px">
-            <span class="text-size-16px text-primary">{{ $t("实付金额") }}：</span
-            ><span class="font-thin text-size-36px text-primary">￥79.00</span>
-          </div>
+        <order-detail-info-item label="订单号" value="hy167489546"></order-detail-info-item>
+        <order-detail-info-item label="下单时间" value="2022-08-11 09：30：00"></order-detail-info-item>
+        <order-detail-info-item label="支付时间"></order-detail-info-item>
+        <order-detail-info-item label="实付金额" value="￥79"></order-detail-info-item>
+        <order-detail-info-item label="交易状态" value="未支付"></order-detail-info-item>
+        <order-detail-info-item label="交易单号"></order-detail-info-item>
+        <order-detail-info-item label="商家备注"></order-detail-info-item>
+
 
-          <div class="text-size-16px text-primary mb-10px">
-            {{ $t("收货人") }}：陈小婷 86+18926171468
-          </div>
-          <div class="text-size-16px text-primary mb-20px">
-            {{ $t("收货地址") }}：广东广州海珠区新满西中53号
-          </div>
-          <el-button class="!text-white !w-200px !h-40px !bg-primary" round>提交订单</el-button>
-        </div>
       </div>
     </div>
-  </div>
+  </ui-page-layout>
 </template>
 
 <script>
 export default {};
 </script>
 
-<style></style>
+<style>
+
+</style>

src/h5/pages/product/product-detail.vue

@@ -1,145 +1,117 @@
 <template>
-  <div class="w-1200px mt-20px flex justify-between">
-    <div class="w-860px h-full bg-white px-30px pt-30px pb-50px">
-      <div class="flex mb-30px">
-        <img class="w-400px h-400px object-cover mr-20px" src="/imgs/product_item.png" />
-
-        <div>
-          <div class="font-thin text-size-20px leading-28px mb-20px">
-            这里是产品名称这里是产品名称这里是
-          </div>
-          <div class="font-normal text-[#686868] text-size-14px leading-20px mb-44px">
-            这里是文章简介或摘要内容，这里是文章简介或摘要内容这里是文章简介或摘要内容，这里是文章简介
-          </div>
-          <div class="flex items-start mb-42px">
-            <div
-              class="font-normal text-[#686868] text-size-14px leading-20px w-70px whitespace-nowrap"
-            >
-              购买说明：
-            </div>
-            <div class="font-normal text-size-14px leading-20px">
-              购买说明内容购买说明内容购买说明内容购买说明 购买说明内容购买说明内容内容
-            </div>
-          </div>
-          <div class="flex items-center mb-33px">
-            <div
-              class="font-normal text-[#686868] text-size-14px leading-20px w-70px whitespace-nowrap"
-            >
-              价格：
-            </div>
-            <div class="text-primary text-size-36px font-light">￥99.00</div>
-          </div>
-          <div class="flex items-center mb-33px">
-            <div
-              class="font-normal text-[#686868] text-size-14px leading-20px w-70px whitespace-nowrap"
-            >
-              数量：
-            </div>
-            <div>
-              <el-input-number></el-input-number>
-            </div>
-            <div class="font-normal text-[#686868] text-size-14px">
-              <span class="ml-20px">{{ $t("件") }}</span>
-              <span class="ml-20px">{{ $t("有货") }}</span>
-            </div>
-          </div>
-          <div class="flex justify-center">
-            <el-button @click="$router.push('order-detail')" class="!text-white !w-200px !h-40px !bg-primary" round>{{
-              $t("立即购买")
-            }}</el-button>
-          </div>
+  <ui-page-layout title="产品介绍">
+    <ui-scroll-view>
+      <ui-swiper :showPagination="true" :items="banner1" class="w-full h-750rem"></ui-swiper>
+      <div class="px-24rem bg-white">
+        <div class="leading-50rem text-size-36rem mt-24rem">
+          这里是产品名这里是产品名这里是产品名
+        </div>
+        <div class="leading-42rem text-[#686868] text-size-30rem">
+          这里是文章简介或摘要内容，这里是文章简介或摘要内容这里是文章简介或摘要内容，这里是文章简介
+        </div>
+        <div class="mt-40rem">
+          <span class="text-size-30rem text-[#686868]">{{$t("售价")}}：</span>
+          <span class="text-primary text-size-48rem font-300">¥79.00</span>
+        </div>
+        <div class="mt-50rem text-size-36rem text-[#282828]">
+          购买说明
+        </div>
+        <div class="mt-14rem font-300 text-size-30rem leading-42rem rounded-3rem bg-[#F7F7F7] pt-22rem pl-26rem pb-34rem pr-39rem">
+          购买说明内容购买说明内容购买说明内容购买说明 购买说明内容购买说明内容内容
+        </div>
+        <div class="mt-50rem text-size-36rem text-[#282828]">产品详情</div>
+        
+        <div v-html="html"> </div>
+        <div @click="$router.push('/order-confirm')" class=" w-600rem h-88rem flex justify-center items-center text-white bg-primary rounded-full mx-auto">
+          立即购买
         </div>
       </div>
-      <ui-devider></ui-devider>
-      <div class="text-size-24px mt-36px mb-34px">产品详情</div>
-      <div class="product-intro" v-html="html"></div>
-    </div>
-    <div class="w-320px">
-      <ui-swiper
-        class="mb-20px"
-        :items="[
-          { url: 'imgs/article_cover1.png', title: '这是标题' },
-          { url: 'imgs/article_cover1.png', title: '这是标题' },
-        ]"
-        titleClass="swiper-title"
-      ></ui-swiper>
-    </div>
-  </div>
+
+    </ui-scroll-view>
+  </ui-page-layout>
+
 </template>
 
 <script>
 export default {
   data() {
     return {
-      html: `<p><span style="font-size:16px">据央视新闻7月22日消息，俄罗斯国防部发言人科纳申科夫21日通报说，俄军在尼古拉耶夫和克拉玛托尔斯克打击了乌军多个指挥所。</span></p>
+      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: "" },
+      ],
+      html: `<p><span style="font-size:16rem">据央视新闻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><span style="font-size:16rem"><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><span style="font-size:16rem">据央视新闻7月22日消息，俄罗斯国防部发言人科纳申科夫21日通报说，俄军在尼古拉耶夫和克拉玛托尔斯克打击了乌军多个指挥所。</span></p>
 
 <p>&nbsp;</p>
 
 <p>&nbsp;</p>
 
-<p><span style="font-size:16px">另据央视新闻报道称，当地时间21日，欧洲理事会公布了针对俄罗斯的新制裁措施，包括禁止进口来自俄罗斯金和珠宝；增加了俄罗斯可用于军用的物资和技术禁运清单，增加了对俄罗斯个人和实体的制裁。俄军打击乌军指挥所 乌军击退俄军进攻</span></p>
+<p><span style="font-size:16rem">另据央视新闻报道称，当地时间21日，欧洲理事会公布了针对俄罗斯的新制裁措施，包括禁止进口来自俄罗斯金和珠宝；增加了俄罗斯可用于军用的物资和技术禁运清单，增加了对俄罗斯个人和实体的制裁。俄军打击乌军指挥所 乌军击退俄军进攻</span></p>
 
 <p>&nbsp;</p>
 
 <p>&nbsp;</p>
 
-<p><span style="font-size:16px">俄罗斯国防部发言人科纳申科夫21日通报说，俄军在尼古拉耶夫和克拉玛托尔斯克打击了乌军多个指挥所，在顿涅茨克和尼古拉耶夫等地摧毁了多个乌军弹药库。另外，俄军还击落乌空军1架苏-25战机、1架米-8直升机和5架军用无人机。</span></p>
+<p><span style="font-size:16rem">俄罗斯国防部发言人科纳申科夫21日通报说，俄军在尼古拉耶夫和克拉玛托尔斯克打击了乌军多个指挥所，在顿涅茨克和尼古拉耶夫等地摧毁了多个乌军弹药库。另外，俄军还击落乌空军1架苏-25战机、1架米-8直升机和5架军用无人机。</span></p>
 
 <p>&nbsp;</p>
 
 <p>&nbsp;</p>
 
-<p><span style="font-size:16px">另据乌克兰国家通讯社21日援引乌各地军事部门的消息报道，俄军继续对苏梅、哈尔科夫、卢甘斯克、顿涅茨克等地区进行大规模炮击。在乌军阻击下，俄军未能在巴赫穆特方向取得突破，没有占领乌格列戈尔斯克发电厂。</span></p>
+<p><span style="font-size:16rem">另据乌克兰国家通讯社21日援引乌各地军事部门的消息报道，俄军继续对苏梅、哈尔科夫、卢甘斯克、顿涅茨克等地区进行大规模炮击。在乌军阻击下，俄军未能在巴赫穆特方向取得突破，没有占领乌格列戈尔斯克发电厂。</span></p>
 
 <p>&nbsp;</p>
 
 <p>&nbsp;</p>
 
-<p><span style="font-size:16px">俄外长称在乌军事目标发生变化，与西方向乌军提供武器有关。</span></p>
+<p><span style="font-size:16rem">俄外长称在乌军事目标发生变化，与西方向乌军提供武器有关。</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><span style="font-size:16rem"><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><span style="font-size:16rem">据央视新闻7月22日消息，俄罗斯国防部发言人科纳申科夫21日通报说，俄军在尼古拉耶夫和克拉玛托尔斯克打击了乌军多个指挥所。</span></p>
 
 <p>&nbsp;</p>
 
 <p>&nbsp;</p>
 
-<p><span style="font-size:16px">另据央视新闻报道称，当地时间21日，欧洲理事会公布了针对俄罗斯的新制裁措施，包括禁止进口来自俄罗斯金和珠宝；增加了俄罗斯可用于军用的物资和技术禁运清单，增加了对俄罗斯个人和实体的制裁。俄军打击乌军指挥所 乌军击退俄军进攻</span></p>
+<p><span style="font-size:16rem">另据央视新闻报道称，当地时间21日，欧洲理事会公布了针对俄罗斯的新制裁措施，包括禁止进口来自俄罗斯金和珠宝；增加了俄罗斯可用于军用的物资和技术禁运清单，增加了对俄罗斯个人和实体的制裁。俄军打击乌军指挥所 乌军击退俄军进攻</span></p>
 
 <p>&nbsp;</p>
 
 <p>&nbsp;</p>
 
-<p><span style="font-size:16px">俄罗斯国防部发言人科纳申科夫21日通报说，俄军在尼古拉耶夫和克拉玛托尔斯克打击了乌军多个指挥所，在顿涅茨克和尼古拉耶夫等地摧毁了多个乌军弹药库。另外，俄军还击落乌空军1架苏-25战机、1架米-8直升机和5架军用无人机。</span></p>
+<p><span style="font-size:16rem">俄罗斯国防部发言人科纳申科夫21日通报说，俄军在尼古拉耶夫和克拉玛托尔斯克打击了乌军多个指挥所，在顿涅茨克和尼古拉耶夫等地摧毁了多个乌军弹药库。另外，俄军还击落乌空军1架苏-25战机、1架米-8直升机和5架军用无人机。</span></p>
 
 <p>&nbsp;</p>
 
 <p>&nbsp;</p>
 
-<p><span style="font-size:16px">另据乌克兰国家通讯社21日援引乌各地军事部门的消息报道，俄军继续对苏梅、哈尔科夫、卢甘斯克、顿涅茨克等地区进行大规模炮击。在乌军阻击下，俄军未能在巴赫穆特方向取得突破，没有占领乌格列戈尔斯克发电厂。</span></p>
+<p><span style="font-size:16rem">另据乌克兰国家通讯社21日援引乌各地军事部门的消息报道，俄军继续对苏梅、哈尔科夫、卢甘斯克、顿涅茨克等地区进行大规模炮击。在乌军阻击下，俄军未能在巴赫穆特方向取得突破，没有占领乌格列戈尔斯克发电厂。</span></p>
 
 <p>&nbsp;</p>
 
 <p>&nbsp;</p>
 
-<p><span style="font-size:16px">俄外长称在乌军事目标发生变化，与西方向乌军提供武器有关。</span></p>
+<p><span style="font-size:16rem">俄外长称在乌军事目标发生变化，与西方向乌军提供武器有关。</span></p>
 
 <p>&nbsp;</p>
 
@@ -152,4 +124,6 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+
+</style>

src/h5/pages/realtime-news/realtime-news.vue

@@ -1,111 +1,21 @@
 <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>
+  <ui-page-layout title="实时新闻">
+    <template v-slot:search>
+      <div class=" flex justify-center pb-22rem">
+        <van-field class="!w-702rem !h-70rem !p-0 !rounded-full">
+          <template v-slot:left-icon>
+            <div class="h-full w-full flex justify-center items-center">
+              <img src="/imgs/h5-search-icon.png" class="w-36rem ml-24rem" />
             </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>
+          </template>
+        </van-field>
       </div>
-    </div>
-  </div>
+    </template>
+    <ui-mask-picture class="w-full h-136rem"></ui-mask-picture>
+    
+    <UiMainArticle v-for="index in 8"></UiMainArticle>
+
+  </ui-page-layout>
 </template>
 
 <script>
@@ -130,12 +40,14 @@ export default {
   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;
 }

src/h5/pages/recommend/recommend.vue

@@ -1,111 +1,21 @@
 <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>
+  <ui-page-layout title="推荐内容">
+    <template v-slot:search>
+      <div class=" flex justify-center pb-22rem">
+        <van-field class="!w-702rem !h-70rem !p-0 !rounded-full">
+          <template v-slot:left-icon>
+            <div class="h-full w-full flex justify-center items-center">
+              <img src="/imgs/h5-search-icon.png" class="w-36rem ml-24rem" />
             </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>
+          </template>
+        </van-field>
       </div>
-    </div>
-  </div>
+    </template>
+    <ui-mask-picture class="w-full h-136rem"></ui-mask-picture>
+    
+    <UiMainArticle v-for="index in 8"></UiMainArticle>
+
+  </ui-page-layout>
 </template>
 
 <script>
@@ -130,12 +40,14 @@ export default {
   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;
 }

src/h5/pages/user/_components/user-account-setting-info-item.vue

@@ -1,40 +1,42 @@
 <template>
-  <div class="info-item" v-bind="$attrs">
-    <div class="info-item-label">
-      <div class="content-holder">
-        <img
-          v-if="required"
-          src="/imgs/required_icon.png"
-          class="object-contain w-full h-full"
-        />
-      </div>
-      <div class="text-size-16px text-[#686868]">{{ $t(label) }}</div>
-    </div>
-    <div v-if="!$slots.default" class="text-size-16px text-black pl-20px">
-      {{ text }}
-    </div>
-    <slot></slot>
-  </div>
+  <van-field @input="onChange" center v-bind="$attrs" :label="$t(label)">
+    <template v-slot:input>
+      <slot></slot>
+    </template>
+  </van-field>
+
 </template>
 
 <script>
 export default {
+  data() {
+    return {
+      name: "xxx"
+    }
+  },
+  methods: {
+    onChange(v) {
+      this.$emit('input', v)
+    }
+  },
   props: {
     label: {},
-    required: {},
-    text: {},
+    // required: {},
+    // text: {},
   },
 };
 </script>
 
 <style>
 .info-item {
-  @apply flex mb-40px;
+  @apply flex mb-40rem;
 }
+
 .info-item-label {
-  @apply flex w-120px items-center;
+  @apply flex w-120rem items-center;
 }
+
 .info-item-label .content-holder {
-  @apply w-8px h-full  mr-6px ml-17px;
+  @apply w-8rem h-full mr-6rem ml-17rem;
 }
 </style>

src/h5/pages/user/_components/user-order-item.vue

@@ -0,0 +1,38 @@
+<template>
+    <div @click="$router.push('/order-detail')" class="bg-white pt-35rem pl-34rem pr-26rem pb-34rem relative rounded-10rem mb-24rem">
+        <div class="h-150rem flex mb-68rem">
+            <img src="/imgs/article_cover_small1.png" class="w-150rem h-150rem object-cover" />
+            <div class="ml-20rem flex flex-col justify-between">
+                <div class="text-size-30rem">
+                    这里是产品名称这里是产品名称这里是产品名称
+                </div>
+                <div class="flex justify-between items-center">
+                    <div class="text-size-30rem text-primary font-light">¥79</div>
+                    <div class="text-size-30rem text-[#686868] font-light">x1</div>
+                </div>
+            </div>
+        </div>
+        <div>
+            <span class="text-primary text-size-30rem">实付金额：</span>
+            <span class="text-primary text-size-42rem font-light">¥79.00</span>
+        </div>
+        <!-- <div
+            class="right-30rem bottom-43rem absolute w-180rem h-70rem bg-primary rounded-full flex justify-center items-center text-size-30rem text-white">
+            去支付
+        </div> -->
+        <div
+            class="right-30rem bottom-43rem absolute w-180rem h-70rem  rounded-full flex justify-center items-center text-size-30rem text-primary border-1rem border-solid border-primary">
+            已支付
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/h5/pages/user/_components/user-vip-order-item.vue

@@ -0,0 +1,28 @@
+<template>
+    <div @click="$router.push('/order-detail')" class="bg-white pt-30rem px-34rem rounded-10rem relative pb-24rem mb-24rem">
+        <div class="flex justify-between items-center mb-64rem text-size-30rem">
+            <div>月会员</div>
+            <div class="text-[#686868]">30天</div>
+            <div class="text-primary font-light">¥99</div>
+        </div>
+        <div>
+            <span class="text-primary text-size-30rem">实付金额：</span>
+            <span class="text-primary text-size-42rem font-light">¥79.00</span>
+        </div>
+        <!-- <div
+            class="right-30rem bottom-43rem absolute w-180rem h-70rem bg-primary rounded-full flex justify-center items-center text-size-30rem text-white">
+            去支付
+        </div> -->
+        <div
+            class="right-30rem bottom-43rem absolute w-180rem h-70rem  rounded-full flex justify-center items-center text-size-30rem text-primary border-1rem border-solid border-primary">
+            已支付
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+

src/h5/pages/user/user-account-setting.vue

@@ -1,71 +1,75 @@
 <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>
+  <ui-page-layout title="设置个人信息">
+    <ui-scroll-view>
+      <div class="account-setting">
+
+
+        <div class="h-14rem"></div>
+
+
+        <user-account-setting-info-item label="头像">
+          <img src="/imgs/avatar.png" class="w-80rem h-80rem" />
+        </user-account-setting-info-item>
+        <user-account-setting-info-item :value="nickName" label="昵称" text="cyt"></user-account-setting-info-item>
+        <user-account-setting-info-item :value="email" label="账号" text="15486323563@qq.com">
+        </user-account-setting-info-item>
+        <user-account-setting-info-item label="密码">
+          <div class=" flex items-center">
+            <div class="mr-50rem">*********</div>
+            <div class="text-primary cursor-pointer">重置密码</div>
+          </div>
+        </user-account-setting-info-item>
+        <user-account-setting-info-item v-model="name" label="姓名">
+
+        </user-account-setting-info-item>
+        <user-account-setting-info-item v-model="phone" label="电话">
+          <!-- <ui-input v-model="phone" class="!w-345rem">
+            <div slot="suffix" class="flex items-center h-full">
+              <div class="text-black">+86</div>
+              <div class="w-12rem"></div>
+              <img src="/imgs/menu-arrow.png" class="w-6rem h-auto" />
+              <div class="w-16rem"></div>
+            </div>
+          </ui-input> -->
+        </user-account-setting-info-item>
+        <user-account-setting-info-item 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 v-model="job" label="职业">
+
+        </user-account-setting-info-item>
+        <user-account-setting-info-item v-model="jobUnit" label="工作单位">
+
+        </user-account-setting-info-item>
+        <user-account-setting-info-item v-model="addr" label="地址">
+
+        </user-account-setting-info-item>
       </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>
+    </ui-scroll-view>
+  </ui-page-layout>
 </template>
 
 <script>
 
 export default {
-    data(){
-        return {
-            gender: 0,
-            name: "陈小婷",
-            phone: "18926145678",
-            job: "产品经理",
-            jobUnit: "广州量子互联科技有限公司",
-            addr: "广州市黄埔区联和街道黄埔科学大道112号绿地广场1710室"
-        }
+  data() {
+    return {
+      nickName: "cyt",
+      email: "15486323563@qq.com",
+      gender: 0,
+      name: "陈小婷",
+      phone: "18926145678",
+      job: "产品经理",
+      jobUnit: "广州量子互联科技有限公司",
+      addr: "广州市黄埔区联和街道黄埔科学大道112号绿地广场1710室"
     }
+  }
 };
 </script>
 
-<style></style>
+<style>
+
+</style>

src/h5/pages/user/user-collection.vue

@@ -1,21 +1,20 @@
 <template>
-  <div>
-    <div class="h-34px"></div>
-    <ui-title-devider title="我的收藏"></ui-title-devider>
-    <div class="px-40px">
-      <div class="h-20px"></div>
-      <ui-main-article class="mb-20px">
-        <!-- <img src="/imgs/star.png" slot="right" class="w-28px right-19px bottom-10px absolute"/> -->
-        <img src="/imgs/star-blank.png" slot="right" class="w-28px right-19px bottom-10px absolute"/>
+  <ui-page-layout class="bg-white" title="我的点赞">
+    <div class="p-24rem">
+      <ui-main-article v-for="item in 4" class="mb-24rem">
+
+        <img src="/imgs/star.png" slot="right" class="w-40rem right-0 bottom-17rem absolute"/>
+        <!-- <img src="/imgs/star-blank.png" slot="right" class="w-40rem right-0 bottom-17rem absolute"/> -->
+        
       </ui-main-article>
-      <ui-main-article class="mb-20px"></ui-main-article>
-      <ui-main-article class="mb-20px"></ui-main-article>
     </div>
-  </div>
+  </ui-page-layout>
 </template>
 
 <script>
 export default {};
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+
+</style>

src/h5/pages/user/user-comment.vue

@@ -1,20 +1,17 @@
 <template>
-    <div>
-      <div class="h-34px"></div>
-      <ui-title-devider title="我的收藏"></ui-title-devider>
-      <div class="px-40px">
-        <div class="h-20px"></div>
-        <ui-main-article v-for="item in 4" class="mb-20px">
-          
-          
-        </ui-main-article>
-      </div>
+  <ui-page-layout title="我的评论">
+    <div class="p-24rem">
+      <ui-main-article v-for="item in 4" class="mb-20px"></ui-main-article>
     </div>
-  </template>
+  </ui-page-layout>
+
+</template>
   
-  <script>
-  export default {};
-  </script>
+<script>
+export default {};
+</script>
   
-  <style lang="scss" scoped></style>
+<style lang="scss" scoped>
+
+</style>
   

src/h5/pages/user/user-history.vue

@@ -1,20 +1,17 @@
 <template>
-    <div>
-      <div class="h-34px"></div>
-      <ui-title-devider title="我的收藏"></ui-title-devider>
-      <div class="px-40px">
-        <div class="h-20px"></div>
-        <ui-main-article v-for="item in 4" class="mb-20px">
-          
-          
-        </ui-main-article>
-      </div>
+  <ui-page-layout title="我的收藏">
+    <div class="p-24rem">
+      <ui-main-article v-for="item in 4" class="mb-20px"></ui-main-article>
     </div>
-  </template>
+  </ui-page-layout>
+
+</template>
   
-  <script>
-  export default {};
-  </script>
+<script>
+export default {};
+</script>
   
-  <style lang="scss" scoped></style>
+<style lang="scss" scoped>
+
+</style>
   

src/h5/pages/user/user-like.vue

@@ -1,23 +1,21 @@
 <template>
-  <div>
-    <div class="h-34px"></div>
-    <ui-title-devider title="我的收藏"></ui-title-devider>
-    <div class="px-40px">
-      <div class="h-20px"></div>
-      <ui-main-article v-for="item in 4" class="mb-20px">
-        
-        <img
-          src="/imgs/like-button-checked.png"
-          slot="right"
-          class="w-28px right-19px bottom-10px absolute"
-        />
+  <ui-page-layout class="bg-white" title="我的点赞">
+    <div class="p-24rem">
+      <ui-main-article v-for="item in 4" class="mb-24rem">
+
+        <!-- <img src="/imgs/like-button-checked.png" slot="right" class="w-39rem right-0 bottom-17rem absolute" /> -->
+        <img src="/imgs/like-button-checked.png" slot="right" class="w-39rem right-0 bottom-17rem absolute" />
       </ui-main-article>
     </div>
-  </div>
+  </ui-page-layout>
 </template>
 
 <script>
 export default {};
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+
+</style>
+
+

src/h5/pages/user/user-order.vue

@@ -1,22 +1,42 @@
 <template>
-  <div>
-    <div class="h-34px"></div>
-    <ui-title-devider :showBorder="false" title="我的订单"></ui-title-devider>
-    <div class="pl-27px">
-      <el-tabs v-model="activeName" @tab-click="handleClick">
-        <el-tab-pane label="会员订单" name="first">
-          <ui-order-table :data="vipOrdersData" :columns="vipOrders"></ui-order-table>
-        </el-tab-pane>
-        <el-tab-pane label="商品订单" name="second">
-          <ui-order-table :data="goodsOrdersData" :columns="goodsOrders">
-            <template v-slot:0="{ row }">
-              <img class="w-full h-full object-contain" :src="row.pic" />
-            </template>
-          </ui-order-table>
-        </el-tab-pane>
-      </el-tabs>
-    </div>
-  </div>
+  <ui-page-layout title="我的订单">
+    <van-tabs v-model="active" background="#FFFFFF" color="#124026" class="h-full">
+      <van-tab :title="$t('全部订单')" class="h-full flex-1">
+        <div class="px-24rem pt-24rem">
+          <user-order-item></user-order-item>
+          <user-order-item></user-order-item>
+          <user-vip-order-item></user-vip-order-item>
+        </div>
+      </van-tab>
+      <van-tab :title="$t('会员订单')" class="h-full flex-1">
+        <framework-auto-size>
+          <template v-slot="props">
+            <div v-if="props.size" :style="`height:calc(${props.size?.height} + 120rem);`">
+              <user-vip-order-item></user-vip-order-item>
+              <user-vip-order-item></user-vip-order-item>
+              <user-vip-order-item></user-vip-order-item>
+
+            </div>
+          </template>
+        </framework-auto-size>
+      </van-tab>
+      <van-tab :title="$t('商品订单')" class="h-full flex-1">
+        <framework-auto-size>
+          <template v-slot="props">
+            <div v-if="props.size" :style="`height:calc(${props.size?.height} + 120rem);`">
+
+              <user-order-item></user-order-item>
+              <user-order-item></user-order-item>
+              <user-order-item></user-order-item>
+              <user-order-item></user-order-item>
+            </div>
+          </template>
+        </framework-auto-size>
+      </van-tab>
+
+    </van-tabs>
+  </ui-page-layout>
+
 </template>
 
 <script>
@@ -101,7 +121,7 @@ export default {
           prop: "pic",
           label: "产品图",
           align: "center",
-          width: "88px",
+          width: "88rem",
         },
         {
           prop: "name",

src/h5/pages/user/user-subscription.vue

@@ -1,22 +1,24 @@
 <template>
-  <div>
-    <div class="h-34px"></div>
-    <ui-title-devider title="我的收藏"></ui-title-devider>
-    <div class="px-40px">
-      <div class="h-20px"></div>
-      <ui-main-article v-for="item in 4" class="mb-20px">
-        <!-- <div slot="right" class="w-100px h-30px rounded-full flex items-center justify-center text-white text-size-14 bg-primary absolute right-26px bottom-12px">
-            {{$t("取消订阅")}}
-          </div> -->
+  <ui-page-layout title="我的订阅">
+    <div class="p-24rem">
+      <ui-main-article v-for="item in 4" class="mb-24rem">
+        
+        <!-- <div
+          slot="right"
+          class="w-120rem h-40rem rounded-full flex items-center justify-center text-primary text-size-14 border-primary absolute right-0 bottom-17rem border-1rem border-solid"
+        >
+          {{ $t("取消订阅") }}
+        </div> -->
         <div
           slot="right"
-          class="w-100px h-30px rounded-full flex items-center justify-center text-primary text-size-14 border-primary absolute right-26px bottom-12px border-1px border-solid"
+          class="w-120rem h-40rem rounded-full flex items-center justify-center text-primary text-size-14  absolute right-0 bottom-17rem border-1rem border-solid bg-primary !text-white"
         >
           {{ $t("取消订阅") }}
         </div>
       </ui-main-article>
     </div>
-  </div>
+  </ui-page-layout>
+  
 </template>
 
 <script>

src/h5/pages/vip/vip-index.vue

@@ -0,0 +1,17 @@
+<template>
+    <ui-page-layout title="VIP期刊文章">
+        <div class="p-24rem">
+
+            <ui-vip-article class="mb-24rem"></ui-vip-article>
+            <ui-main-article v-for="index in 10"></ui-main-article>
+        </div>
+    </ui-page-layout>
+</template>
+  
+<script>
+export default {};
+</script>
+<style>
+
+</style>
+  

src/h5/pages/vip/vip.vue

@@ -1,34 +1,25 @@
 <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>
+  <ui-page-layout title="VIP期刊">
+    <ui-mask-picture class="w-full h-136rem"></ui-mask-picture>
+    <van-tabs v-model="active" background="#FFFFFF" color="#124026" class="h-full">
+
+      <van-tab :key="index" v-for="index in 10" :title="2022 - index" class="h-full flex-1">
+        <div class="px-24rem pt-12rem">
+
+
+
+
+          <ui-vip-article class="mb-24rem" v-for="index in 8"></ui-vip-article>
+
+        </div>
+      </van-tab>
+    </van-tabs>
+  </ui-page-layout>
 </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>

src/h5/router/index.ts

@@ -1,30 +1,35 @@
 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";
+import Home from "@h5/pages/home/home.vue";
+import Recommend from "@h5/pages/recommend/recommend.vue";
+import Hot from "@h5/pages/hot/hot.vue";
+import RealtimeNews from "@h5/pages/realtime-news/realtime-news.vue";
+import ArticleDetail from "@h5/pages/article-detail/article-detail.vue";
+import ArticleComment from "@h5/pages/article-detail/comment.vue";
+import BasicLayout from "@h5/components/layout-basic/layout-basic.vue";
+import UserLayout from "@h5/components/layout-user/layout-user.vue";
+import UserPersonalCenter from "@h5/pages/user/user-personal-center.vue";
+import UserAccountSetting from "@h5/pages/user/user-account-setting.vue";
+import UserOrder from "@h5/pages/user/user-order.vue";
+import Like from "@h5/pages/user/user-like.vue";
+import Comment from "@h5/pages/user/user-comment.vue";
+import Collection from "@h5/pages/user/user-collection.vue";
+import History from "@h5/pages/user/user-history.vue";
+import Subscription from "@h5/pages/user/user-subscription.vue";
+import Login from "@h5/pages/auth/login.vue";
+import Register from "@h5/pages/auth/register.vue";
+import ChangePass from "@h5/pages/auth/change-password.vue";
+import ProfileComplete from "@h5/pages/auth/profile-complete.vue";
+import ProductDetail from "@h5/pages/product/product-detail.vue";
+import OrderDetail from "@h5/pages/product/order-detail.vue";
+import OrderConfirm from "@h5/pages/product/order-confirm.vue";
+import SpecificArticle from "@h5/pages/specific-article/specific-article.vue";
+import Vip from "@h5/pages/vip/vip.vue";
+import VipIndex from "@h5/pages/vip/vip-index.vue";
+import Search from "@h5/pages/search/search.vue";
+import Aboutus from "@h5/pages/aboutus/aboutus.vue";
+import Publish from "@h5/pages/publish/publish.vue";
 
 Vue.use(VueRouter);
 
@@ -32,22 +37,20 @@ export const routes: RouteConfig[] = [
   {
     path: "/",
     name: "root",
-    redirect:'/login',
+    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 },
@@ -59,21 +62,37 @@ export const routes: RouteConfig[] = [
         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: "/user/collection", component: Collection },
+  { path: "/user/subscription", component: Subscription },
+  { path: "/user/like", component: Like },
+  { path: "/user/comment", component: Comment },
+  { path: "/user/history", component: History },
+  { path: "/user/account-setting", component: UserAccountSetting },
+  { path: "/user/order", component: UserOrder },
+  { path: "/profile-complete", component: ProfileComplete },
+  { path: "/vip", component: Vip },
+  { path: "/vip-index", component: VipIndex },
+  { path: "/recommend", component: Recommend },
+  { path: "/hot", component: Hot },
+  { path: "/realtime-news", component: RealtimeNews },
+  { path: "/change-pass", component: ChangePass },
+  { path: "/login", component: Login },
+  { path: "/register", component: Register },
+  { path: "/article-detail", component: ArticleDetail },
+  { path: "/article-comment", component: ArticleComment },
+  { path: "/product-detail", component: ProductDetail },
+  { path: "/order-detail", component: OrderDetail },
+  { path: "/order-confirm", component: OrderConfirm },
 
   {
     path: "/:path(.*)",

src/pc/components/layout-user/layout-user-menu.vue

@@ -62,7 +62,7 @@ export default {
         },
         {
           icon: "/imgs/user-order.png",
-          activeIcon: "/imgs/user-setting-1.png",
+          activeIcon: "/imgs/user-order-1.png",
           name: "我的订单",
           route: "/user/order",
         },

src/pc/pages/user/user-comment.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
       <div class="h-34px"></div>
-      <ui-title-devider title="我的收藏"></ui-title-devider>
+      <ui-title-devider title="我的评论"></ui-title-devider>
       <div class="px-40px">
         <div class="h-20px"></div>
         <ui-main-article v-for="item in 4" class="mb-20px">

vite.config.h5.ts

@@ -18,7 +18,7 @@ const config = defineConfig(({ command, mode, ssrBuild }) => {
     plugins: [
 
       Components({
-        dirs: ["src/h5/components", "src/h5/pages/**/_components"],
+        dirs: ["src/h5/components","src/common/components", "src/h5/pages/**/_components"],
         resolvers: [
           
         ],