feat: 添加资源+账户页面UI

src/components/layout/BaseHeader.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="base-header bg-#021B1B flex items-center justify-between">
-    <img src="@/assets/images/zc_logo.png" class="w-238px h-32px" alt="" />
-    <div class="mx-auto text-#fff text-20px">
-      Welcome to the EJET PartnerShare Platform
+    <div class="flex items-center">
+      <img src="@/assets/images/zc_logo.png" class="w-238px h-32px" alt="" />
+      <div class="text-#fff text-20px ml-200px">Welcome to the EJET PartnerShare Platform</div>
     </div>
     <div>
       <!-- <img src="@/assets/images/user.png" alt="" class="logo" />
@@ -10,7 +10,7 @@
       <a-dropdown v-if="userStore.token" placement="bottom">
         <div class="ant-dropdown-link cursor-pointer bg-#fff b-rd-50% p-10px flex items-center" @click.prevent>
           <img class="w-20 h-20 rounded-full" v-if="userStore.userInfo.photo" :src="userStore.userInfo.photo" alt="" />
-          <i-custom-user v-else class="w-20 h-20   c-primary" />
+          <i-custom-user v-else class="w-20 h-20 c-primary" />
         </div>
         <span class="mr-10">{{ userStore.userInfo?.username }}</span>
         <template #overlay>
@@ -24,8 +24,7 @@
           </a-menu>
         </template>
       </a-dropdown>
-      <router-link v-else to="login" class="fw-700 text-14px text-#696F79 underline"
-        v-show="showLogin">登录/注册</router-link>
+      <router-link v-else to="login" class="fw-700 text-14px text-#696F79 underline" v-show="showLogin">登录/注册</router-link>
     </div>
   </div>
 </template>

src/views/account/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="page">
     <div class="mb-30 flex items-center">
-      <div class="flex items-center cursor-pointer">
+      <router-link to="/dashboard" class="flex items-center text-#000 decoration-none">
         <LeftOutlined class="text-24px pt-4px" />
         <span class="text-30px fw-700 !mb-0 ml-12">Account</span>
-      </div>
+      </router-link>
     </div>
     <StatisticalData />
     <h2 class="text-20px fw-700 !my-20">Account Details</h2>

src/views/resources/index.vue

@@ -1,14 +1,11 @@
 <template>
   <div class="page py-24 px-32">
-    <h1 class="text-30px fw-700 !mb-12">出海服务</h1>
-    <a-breadcrumb separator=">">
-      <a-breadcrumb-item>
-        <a href="/dashboard">
-          <img src="@/assets/images/home.png" class="w-12 h-12" alt="" srcset="" />
-        </a>
-      </a-breadcrumb-item>
-      <a-breadcrumb-item>出海服务</a-breadcrumb-item>
-    </a-breadcrumb>
+    <div class="mb-30 flex items-center">
+      <router-link to="/dashboard" class="flex items-center text-#000 decoration-none">
+        <LeftOutlined class="text-24px pt-4px" />
+        <span class="text-30px fw-700 !mb-0 ml-12">Natural Resources</span>
+      </router-link>
+    </div>
     <div class="mt-24">
       <div class="p-24 mb-24 flex bg-#fff b-rd-6px">
         <img src="@/assets/images/oversea.jpg" class="w-600 h-340 b-rd-6px mr-36" alt="" srcset="" />
@@ -25,108 +22,38 @@
             </p>
             <p>我们将为您提供品牌出海的内容信息、出海营销运营、海外资源对接、采购订单合作等全链路服务，助力您在海外扎根发展，乘风破浪。</p>
           </div>
-          <div class="flex gap-16">
-            <a-popover trigger="hover">
-              <template #content>
-                <img src="@/assets/images/contact_office.jpg" class="w-240 h-240 object-cover" alt="" srcset="" />
-              </template>
-              <div flex items-center justify-center py-6 w-100 b-rd-4px class="bg-#F2F2F2 text-#3D3D3D cursor-pointer">
-                <img src="@/assets/images/wx_office.png" alt="" mr-5 w-24 h-24 srcset="" />
-                公众号
-              </div>
-            </a-popover>
-            <a-popover trigger="hover">
-              <template #content>
-                <img src="@/assets/images/contact_video.jpg" class="w-240" alt="" srcset="" />
-              </template>
-              <div flex items-center justify-center py-6 w-100 b-rd-4px class="bg-#F2F2F2 text-#3D3D3D cursor-pointer">
-                <img src="@/assets/images/wx_video.png" alt="" mr-5 w-24 h-24 srcset="" />
-                视频号
-              </div>
-            </a-popover>
-            <a-popover trigger="hover">
-              <template #content>
-                <img src="@/assets/images/contact_dy.jpg" class="w-240" alt="" srcset="" />
-              </template>
-              <div flex items-center justify-center py-6 w-100 b-rd-4px class="bg-#F2F2F2 text-#3D3D3D cursor-pointer">
-                <img src="@/assets/images/dy.png" alt="" mr-5 w-24 h-24 srcset="" />
-                抖音
-              </div>
-            </a-popover>
-            <a-popover trigger="hover">
-              <template #content>
-                <img src="@/assets/images/contact_xhs.jpg" class="w-240" alt="" srcset="" />
-              </template>
-              <div flex items-center justify-center py-6 w-100 b-rd-4px class="bg-#F2F2F2 text-#3D3D3D cursor-pointer">
-                <img src="@/assets/images/xhs.png" alt="" mr-5 w-24 h-24 srcset="" />
-                小红书
-              </div>
-            </a-popover>
-          </div>
         </div>
       </div>
       <div class="p-24 mb-24 bg-#fff b-rd-6px">
-        <h3 class="text-16px !fw-600 text-#020202 title">地区解读</h3>
-        <div class="mt-20px flex gap-20">
+        <div class="flex gap-20">
           <div
             v-for="item in areaList"
-            @click="onAreaClick(item)"
-            :class="activeId === item.id && 'bg-#0068FF text-#fff b-rd-4px'"
+            @click="onResourceClick(item)"
+            :class="activeId === item.id && 'bg-#00DD99 fw-500 text-#fff b-rd-8px'"
             :key="item.id"
-            class="text-#666 py-5 px-12 cursor-pointer text-14px"
+            class="text-#666 py-8 px-20 cursor-pointer text-18px"
           >
             {{ item.name }}
           </div>
         </div>
-        <div class="mt-24 grid grid-cols-4 grid-gap-x-24 grid-gap-y-24" v-if="articles.length">
-          <div v-for="item in articles" :key="item.key" class="bg-#fff b-rd-4px overflow-hidden article-item">
-            <img :src="item.pic" class="w-300px h-300px object-cover m-0" alt="" srcset="" />
-            <div class="py-20 px-16">
-              <h3 class="text-16px !fw-600 text-#020202">{{ item.title }}</h3>
-              <a :href="item.url" target="_blank" class="text-#3D3D3D break-all text-14px line-clamp-2 cursor-pointer hover:underline">{{
-                item.url
-              }}</a>
-            </div>
-          </div>
-        </div>
-        <div v-else class="py-120">
-          <a-empty :image="simpleImage" />
-        </div>
-        <div class="mt-24 text-center custom-pagination" v-if="params.total > 0">
-          <a-pagination v-model:current="params.pageNo" :total="params.total" @change="onChangePage" :show-size-changer="false">
-            <template #itemRender="{ type, originalElement }">
-              <a v-if="type === 'prev'">上一页</a>
-              <a v-else-if="type === 'next'">下一页</a>
-              <component :is="originalElement" v-else></component>
-            </template>
-          </a-pagination>
-        </div>
-      </div>
-      <div class="p-24 mb-24 bg-#fff b-rd-6px">
-        <h3 class="text-16px !fw-600 text-#020202 title">出海白皮书</h3>
-        <div class="mt-28px" v-if="filesList.length">
-          <div v-for="item in filesList" :key="item.id" class="flex items-center w-full justify-between mb-24px">
-            <div class="flex items-center">
-              <img src="@/assets/images/pdf.png" class="w-24 h-24 mr-16" alt="" srcset="" />
-              <div class="text-#020202">{{ item.name }}</div>
-            </div>
-            <div class="flex items-center">
-              <div class="text-#666">{{ item.createTime }}</div>
-              <img @click="onDownload(item)" src="@/assets/images/download.png" class="w-24 h-24 ml-12 cursor-pointer" alt="" srcset="" />
+        <div v-if="resourcesList.length" class="mt-24">
+          <div v-for="(item, index) in resourcesList" :key="index" class="mb-20px">
+            <div class="flex justify-between items-center bg-#fff b-rd-12px p-24 pr-40px line-box-shadow">
+              <div class="flex items-center p-10px b-rd-6px">
+                <img src="https://picsum.photos/200/200" class="w-100px h-100px b-rd-6px overflow-hidden" alt="" srcset="" />
+                <div class="ml-16px">
+                  <div class="text-20px fw-700 mb-14px">{{ item.name }}</div>
+                  <div class="text-14px c-#999 mb-8px">{{ item.des || '-' }}</div>
+                  <div class="text-14px c-#999">{{ item.createTime }}</div>
+                </div>
+              </div>
+              <a-button type="primary" class="w-100px h-40px !mb-0 !mt-0 b-rd-6px text-18px">View</a-button>
             </div>
           </div>
         </div>
-        <div v-else>
-          <a-empty :image="simpleImage" />
-        </div>
-        <div class="mt-24 text-center custom-pagination" v-if="filesParams.total > 0">
-          <a-pagination v-model:current="filesParams.pageNo" @change="onChangeFilePage" :total="filesParams.total" :show-size-changer="false">
-            <template #itemRender="{ type, originalElement }">
-              <a v-if="type === 'prev'">上一页</a>
-              <a v-else-if="type === 'next'">下一页</a>
-              <component :is="originalElement" v-else></component>
-            </template>
-          </a-pagination>
+        <a-empty v-else class="py-100px" :image="simpleImage" />
+        <div class="mt-24 text-end" v-if="filesParams.total > 0">
+          <a-pagination v-model:current="filesParams.pageNo" @change="onChangeFilePage" :total="filesParams.total" :show-less-items="true" />
         </div>
       </div>
     </div>
@@ -134,16 +61,21 @@
 </template>
 
 <script setup lang="ts">
+import { LeftOutlined } from '@ant-design/icons-vue'
 import { message } from 'ant-design-vue'
 import { getAreaListApi, getArticlesListApi, getDownloadCountApi, getPdfListApi } from '@/api/oversea'
 import { downloadFileByA } from '@/utils'
 import { Empty } from 'ant-design-vue'
 const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
 
-const areaList = ref<any>([])
-const activeId = ref()
-const articles = ref<any>([])
-const filesList = ref<any>([])
+const areaList = ref<any>([
+  {
+    name: 'All',
+    id: '',
+  },
+])
+const activeId = ref('')
+const resourcesList = ref<any>([])
 const params = ref({
   pageNo: 1,
   pageSize: 12,
@@ -159,105 +91,32 @@ const onDownload = (item: any) => {
   downloadFileByA(item.url, item.name)
   getDownloadCountApi({ id: item.id })
 }
-const onAreaClick = (item: any) => {
+const onResourceClick = (item: any) => {
   activeId.value = item.id
   params.value.pageNo = 1
-  getArticlesList()
-}
-const onChangePage = (page: number) => {
-  params.value.pageNo = page
-  getArticlesList()
+  getPdfList()
 }
+
 const onChangeFilePage = (page: number) => {
   filesParams.value.pageNo = page
   getPdfList()
 }
-const getAreaList = async () => {
-  try {
-    const { data } = await getAreaListApi({ pageNo: 1, pageSize: 9999 })
-    areaList.value = data.result.records
-    activeId.value = data.result.records[0].id
-  } catch (error) {
-    console.log(error)
-  }
-}
-const getArticlesList = async () => {
-  try {
-    params.value.category = activeId.value
-    console.log('params', params.value)
-    const { data } = await getArticlesListApi(params.value)
-    console.log(data.result, 'res')
-    articles.value = data.result.records
-    params.value.total = data.result.total
-  } catch (error) {
-    console.log(error)
-  }
-}
+
 const getPdfList = async () => {
   try {
     const { data } = await getPdfListApi(filesParams.value)
-    console.log(data.result, 'res')
-    filesList.value = data.result.records
+    resourcesList.value = data.result.records
     filesParams.value.total = data.result.total
   } catch (error) {
     console.log(error)
   }
 }
 onMounted(async () => {
-  await getAreaList()
-  await getArticlesList()
   await getPdfList()
 })
 </script>
 <style lang="less" scoped>
-.title {
-  position: relative;
-  &::before {
-    position: absolute;
-    content: '';
-    display: inline-block;
-    width: 4px;
-    top: -5px;
-    left: -24px;
-    bottom: -5px;
-    background: linear-gradient(176deg, #0068ff 0%, #0ff6cd 102%);
-    margin-right: 8px;
-    border-radius: 0px 2px 2px 0px;
-  }
-}
-.article-item {
-  cursor: pointer;
-  transition: all 0.3s;
-  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
-}
-::v-deep(.custom-pagination) {
-  font-size: 14px;
-  .ant-pagination {
-    .ant-pagination-prev,
-    .ant-pagination-next {
-      border: 1px solid #dcdfe6;
-      border-radius: 4px;
-      padding: 5px 12px;
-      height: unset !important;
-      line-height: unset !important;
-      margin-right: 12px;
-    }
-    .ant-pagination-item {
-      border-radius: 4px;
-      border: 1px solid #dcdfe6;
-      margin-right: 12px;
-      &.ant-pagination-item-active {
-        border: 1px solid #0068ff;
-        background: rgba(0, 104, 255, 0.08);
-        a {
-          color: #0068ff !important;
-        }
-      }
-    }
-    .ant-pagination-jump-prev,
-    .ant-pagination-jump-next {
-      line-height: 32px !important;
-    }
-  }
+.line-box-shadow {
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
 }
 </style>