ui

src/components.d.ts

@@ -12,6 +12,7 @@ declare module '@vue/runtime-core' {
     ElButton: typeof import('element-ui/lib/button')['default']
     ElDialog: typeof import('element-ui/lib/dialog')['default']
     ElInput: typeof import('element-ui/lib/input')['default']
+    ElInputNumber: typeof import('element-ui/lib/input-number')['default']
     ElRadio: typeof import('element-ui/lib/radio')['default']
     ElRadioGroup: typeof import('element-ui/lib/radio-group')['default']
     ElSwitch: typeof import('element-ui/lib/switch')['default']

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

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

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

@@ -1,5 +1,5 @@
 <template>
-  <ui-shadow-box v-bind="$attrs" class="relative">
+  <ui-shadow-box @click="$router.push('/article-detail')" v-bind="$attrs" class="relative">
     <div class="flex bg-white pl-16px pr-14px items-center h-165px">
       <div class="relative">
         <img class="w-250px h-140px object-cover" src="/imgs/article_cover1.png" />

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

@@ -3,32 +3,70 @@
     class="h-80px w-screen bg-primary flex justify-center overflow-hidden items-center"
   >
     <div class="flex items-center h-full">
-      <!-- <div class="w-14px"></div> -->
-      <div class="menu-item selected">
+      <div class="w-80px"></div>
+      <div
+        @click="$router.push('/home')"
+        :class="`menu-item ${currentPath === '/home' ? 'selected' : ''}`"
+      >
         {{ $t("首页") }}
       </div>
       <div class="w-40px"></div>
-      <div class="menu-item">{{ $t("推荐") }}</div>
+      <div
+        @click="$router.push('/recommend')"
+        :class="`menu-item ${currentPath === '/recommend' ? 'selected' : ''}`"
+      >
+        {{ $t("推荐") }}
+      </div>
       <div class="w-40px"></div>
-      <div class="menu-item">{{ $t("分类浏览") }}</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 class="menu-item">{{ $t("实时新闻") }}</div>
+      <div
+        @click="$router.push('/realtime-news')"
+        :class="`menu-item ${currentPath === '/realtime-news' ? 'selected' : ''}`"
+      >
+        {{ $t("实时新闻") }}
+      </div>
       <div class="w-40px"></div>
-      <div class="menu-item">{{ $t("vip专区") }}</div>
+      <div
+        @click="$router.push('/vip')"
+        :class="`menu-item ${currentPath === '/vip' ? 'selected' : ''}`"
+      >
+        {{ $t("vip专区") }}
+      </div>
       <div class="w-40px"></div>
-      <div class="menu-item">{{ $t("关于我们") }}</div>
+      <div
+        @click="$router.push('/aboutus')"
+        :class="`menu-item ${currentPath === '/aboutus' ? 'selected' : ''}`"
+      >
+        {{ $t("关于我们") }}
+      </div>
       <div class="w-260px"></div>
-      <div class="menu-item">
+      <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 class="menu-item">
+      <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 class="menu-item">
+      <div
+        @click="$router.push('/login')"
+        :class="`menu-item ${currentPath === '/login' ? 'selected' : ''}`"
+      >
         {{ $t("登录注册") }}
       </div>
       <div class="w-44px"></div>
@@ -38,7 +76,25 @@
         {{ $t("cn") }}
       </div>
     </div>
-    <!-- <div class="min-h-272px w-screen bg-white absolute top-80px"></div> -->
+    <div
+      v-if="typeVisible"
+      class="min-h-272px w-screen bg-white absolute top-80px z-50 flex justify-center pb-30px"
+    >
+      <div class="w-1200px flex flex-wrap">
+        <div
+          @click="() => {
+            $router.push('/specific-article')
+            typeVisible = false
+          }"
+          :class="`type-tag ${index === 0 ? 'selected' : ''}`"
+          v-for="(item, index) in 20"
+          :key="item"
+        >
+          <div class="name">军事</div>
+          <div class="count">1523篇文章</div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -47,6 +103,18 @@ export default {
   mounted() {
     // this.$i18n.locale = "zh-TW";
   },
+  watch: {
+    $route: function (next) {
+      console.log(next.path);
+      this.currentPath = next.path;
+    },
+  },
+  data() {
+    return {
+      typeVisible: false,
+      currentPath: this.$route.path,
+    };
+  },
 };
 </script>
 
@@ -63,6 +131,23 @@ export default {
   bottom: 14px;
   left: 0;
   border-radius: 3px;
-  
+}
+.type-tag {
+  @apply w-110px h-60px bg-[#F7F7F7] flex flex-col justify-center mt-30px pl-15px cursor-pointer;
+}
+.type-tag.selected {
+  @apply bg-primary;
+}
+.type-tag:not(:nth-child(8n)) {
+  @apply mr-40px;
+}
+.type-tag > .name {
+  @apply text-size-16px mb-6px;
+}
+.type-tag.selected > .name {
+  @apply text-white;
+}
+.type-tag > .count {
+  @apply text-size-14px text-[#B8B8B8];
 }
 </style>

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

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

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="h-157px flex items-center ">
+  <div class="h-157px flex items-center " v-bind="$attrs" @click="$router.push('product-detail')">
     <!-- <div class="mr-12.5px">
       
     </div> -->

src/pages/product/order-detail.vue

@@ -0,0 +1,76 @@
+<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>
+        </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>
+
+        <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="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>
+
+          <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>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>

src/pages/product/product-detail.vue

@@ -0,0 +1,155 @@
+<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>
+        </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>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      html: `<p><span style="font-size:16px">据央视新闻7月22日消息，俄罗斯国防部发言人科纳申科夫21日通报说，俄军在尼古拉耶夫和克拉玛托尔斯克打击了乌军多个指挥所。</span></p>
+
+<p>&nbsp;</p>
+
+<p>&nbsp;</p>
+
+<p><span style="font-size:16px"><img alt="" src="/imgs/article-detail-pic-1.png" style="width:100%" /></span></p>
+
+<p>&nbsp;</p>
+
+<p><span style="font-size:16px">据央视新闻7月22日消息，俄罗斯国防部发言人科纳申科夫21日通报说，俄军在尼古拉耶夫和克拉玛托尔斯克打击了乌军多个指挥所。</span></p>
+
+<p>&nbsp;</p>
+
+<p>&nbsp;</p>
+
+<p><span style="font-size:16px">另据央视新闻报道称，当地时间21日，欧洲理事会公布了针对俄罗斯的新制裁措施，包括禁止进口来自俄罗斯金和珠宝；增加了俄罗斯可用于军用的物资和技术禁运清单，增加了对俄罗斯个人和实体的制裁。俄军打击乌军指挥所 乌军击退俄军进攻</span></p>
+
+<p>&nbsp;</p>
+
+<p>&nbsp;</p>
+
+<p><span style="font-size:16px">俄罗斯国防部发言人科纳申科夫21日通报说，俄军在尼古拉耶夫和克拉玛托尔斯克打击了乌军多个指挥所，在顿涅茨克和尼古拉耶夫等地摧毁了多个乌军弹药库。另外，俄军还击落乌空军1架苏-25战机、1架米-8直升机和5架军用无人机。</span></p>
+
+<p>&nbsp;</p>
+
+<p>&nbsp;</p>
+
+<p><span style="font-size:16px">另据乌克兰国家通讯社21日援引乌各地军事部门的消息报道，俄军继续对苏梅、哈尔科夫、卢甘斯克、顿涅茨克等地区进行大规模炮击。在乌军阻击下，俄军未能在巴赫穆特方向取得突破，没有占领乌格列戈尔斯克发电厂。</span></p>
+
+<p>&nbsp;</p>
+
+<p>&nbsp;</p>
+
+<p><span style="font-size:16px">俄外长称在乌军事目标发生变化，与西方向乌军提供武器有关。</span></p>
+
+<p>&nbsp;</p>
+
+<p>&nbsp;</p>
+
+<p><span style="font-size:16px"><img alt="" src="/imgs/article-detail-pic-1.png" style="width:100%" /></span></p>
+
+<p>&nbsp;</p>
+
+<p><span style="font-size:16px">据央视新闻7月22日消息，俄罗斯国防部发言人科纳申科夫21日通报说，俄军在尼古拉耶夫和克拉玛托尔斯克打击了乌军多个指挥所。</span></p>
+
+<p>&nbsp;</p>
+
+<p>&nbsp;</p>
+
+<p><span style="font-size:16px">另据央视新闻报道称，当地时间21日，欧洲理事会公布了针对俄罗斯的新制裁措施，包括禁止进口来自俄罗斯金和珠宝；增加了俄罗斯可用于军用的物资和技术禁运清单，增加了对俄罗斯个人和实体的制裁。俄军打击乌军指挥所 乌军击退俄军进攻</span></p>
+
+<p>&nbsp;</p>
+
+<p>&nbsp;</p>
+
+<p><span style="font-size:16px">俄罗斯国防部发言人科纳申科夫21日通报说，俄军在尼古拉耶夫和克拉玛托尔斯克打击了乌军多个指挥所，在顿涅茨克和尼古拉耶夫等地摧毁了多个乌军弹药库。另外，俄军还击落乌空军1架苏-25战机、1架米-8直升机和5架军用无人机。</span></p>
+
+<p>&nbsp;</p>
+
+<p>&nbsp;</p>
+
+<p><span style="font-size:16px">另据乌克兰国家通讯社21日援引乌各地军事部门的消息报道，俄军继续对苏梅、哈尔科夫、卢甘斯克、顿涅茨克等地区进行大规模炮击。在乌军阻击下，俄军未能在巴赫穆特方向取得突破，没有占领乌格列戈尔斯克发电厂。</span></p>
+
+<p>&nbsp;</p>
+
+<p>&nbsp;</p>
+
+<p><span style="font-size:16px">俄外长称在乌军事目标发生变化，与西方向乌军提供武器有关。</span></p>
+
+<p>&nbsp;</p>
+
+<p>&nbsp;</p>
+
+
+`,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

src/pages/search/search.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="w-screen flex flex-col items-center">
+    <div class="w-full h-146px bg-white flex items-center justify-center">
+      <ui-input :placeholder="$t('请输入关键字')" class="!w-800px ">
+        <el-button class="!mr-20px" slot="suffix" type="text">{{$t("搜索")}}</el-button>
+      </ui-input>
+    </div>
+    <div class="h-20px"></div>
+    <div class="w-860px">
+      <ui-main-article v-for="item in 18"></ui-main-article>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>

src/pages/specific-article/specific-article.vue

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

src/pages/vip/vip.vue

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

src/router/index.ts

@@ -18,6 +18,13 @@ import Subscription from "@/pages/user/user-subscription.vue";
 import Login from "@/pages/auth/login.vue";
 import ChangePass from "@/pages/auth/change-password.vue";
 import ProfileComplete from "@/pages/auth/profile-complete.vue";
+import ProductDetail from "@/pages/product/product-detail.vue";
+import OrderDetail from "@/pages/product/order-detail.vue";
+import SpecificArticle from "@/pages/specific-article/specific-article.vue";
+import Vip from "@/pages/vip/vip.vue";
+import Search from "@/pages/search/search.vue";
+import Aboutus from "@/pages/aboutus/aboutus.vue";
+import Publish from "@/pages/publish/publish.vue";
 
 Vue.use(VueRouter);
 
@@ -36,6 +43,13 @@ export const routes: RouteConfig[] = [
       { path: "/change-pass", component: ChangePass },
       { path: "/profile-complete", component: ProfileComplete },
       { path: "/article-detail", component: ArticleDetail },
+      { path: "/product-detail", component: ProductDetail },
+      { path: "/order-detail", component: OrderDetail },
+      { path: "/specific-article", component: SpecificArticle },
+      { path: "/vip", component: Vip },
+      { path: "/search", component: Search },
+      { path: "/aboutus", component: Aboutus },
+      { path: "/publish", component: Publish },
       {
         path: "/user",
         name: "user",