|
|
@@ -1,111 +1,90 @@
|
|
|
<template>
|
|
|
<div class="page" id="page">
|
|
|
- <div class="top-title wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
|
|
|
- <div class="top-container">
|
|
|
- <n-icon :component="IosFiling" size="40" style="vertical-align: middle" />
|
|
|
- <span>{{ t("common.navigate.news") }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="page-nav-container wow fadeInLeft" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
|
|
|
- <div class="nav-txt">
|
|
|
- <n-breadcrumb separator=">">
|
|
|
- <n-breadcrumb-item>
|
|
|
- <n-icon :component="MdHome" /><router-link to="/home">{{
|
|
|
- t("common.navigate.home")
|
|
|
- }}</router-link>
|
|
|
- </n-breadcrumb-item>
|
|
|
- <n-breadcrumb-item>
|
|
|
- <n-icon :component="IosFiling" />{{ t("common.navigate.news") }}
|
|
|
- </n-breadcrumb-item>
|
|
|
- </n-breadcrumb>
|
|
|
+ <div class="top">
|
|
|
+ <img src="@/assets/images/report/img1.png" alt="">
|
|
|
+ <div>
|
|
|
+ <div class="top_title">Industry News</div>
|
|
|
+ <div class="top_location">
|
|
|
+ <span class="iconfont icon-weizhi"></span>
|
|
|
+ Current Location ： Home <span class="iconfont icon-dkw_guanbi-"></span> <span>Industry News</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="news-content">
|
|
|
- <div class="container content">
|
|
|
- <div class="search wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
|
|
|
- <div class="search-keyword">
|
|
|
- <n-input type="text" size="large" round :placeholder="t('report.content.keyword')" clearable v-model:value="params.keyword">
|
|
|
- <template #suffix>
|
|
|
- <a class="search-btn" @click="handleSearch"><n-icon :component="MdSearch" size="30" color="#0e7a0d" /></a>
|
|
|
- </template>
|
|
|
- </n-input>
|
|
|
+ <div class="box">
|
|
|
+ <div class="box_l">
|
|
|
+ <div class="box_l_title">
|
|
|
+ <div>Information Type</div>
|
|
|
+ <div>
|
|
|
+ <span class="iconfont icon-shouqi1"></span>
|
|
|
</div>
|
|
|
- <div class="search-type">
|
|
|
- <a :class="
|
|
|
- !params?.marketType && !params.marketCategory ? 'selected' : ''
|
|
|
- " @click="handleAll()">{{ t("news.category.title") }}</a>
|
|
|
- <!--资讯分类-->
|
|
|
- <template v-for="item in newsCategory" :key="item">
|
|
|
- <a :class="item.dictValue === params?.marketType ? 'selected' : ''" @click="handleType(item.dictValue)">{{ item.dictLabel }}</a>
|
|
|
- </template>
|
|
|
- <!--报告分类-->
|
|
|
- <template v-for="item in reportTypes" :key="item">
|
|
|
- <a :class="
|
|
|
- item.dictValue === params?.marketCategory ? 'selected' : ''
|
|
|
- " @click="handleCategroy(item.dictValue)">{{ item.dictLabel }}</a>
|
|
|
- </template>
|
|
|
+ </div>
|
|
|
+ <div class="box_l_list">
|
|
|
+ <template v-for="item in newsCategory" :key="item">
|
|
|
+ <div class="box_l_list_item" :class="{active:item.dictValue === params?.marketType}" @click=" handleType(item.dictValue)">
|
|
|
+ <div class="box_l_list_item_l">{{ item.dictLabel }}</div>
|
|
|
+ <div class="box_l_list_item_r ">
|
|
|
+ <div></div>
|
|
|
+ <span class="iconfont icon-duigou"></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div class="box_l_title">
|
|
|
+ <div>Industry Segment</div>
|
|
|
+ <div>
|
|
|
+ <span class="iconfont icon-shouqi1"></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="content-list">
|
|
|
- <template v-for="item in pageList?.list" :key="item">
|
|
|
- <n-list :show-divider="false">
|
|
|
- <n-list-item class="content-list-item wow fadeInRight" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
|
|
|
- <template #prefix>
|
|
|
- <div class="img">
|
|
|
- <a :href="
|
|
|
- (lang === 'zh-CN' ? '' : '/en') +
|
|
|
- '/news/' +
|
|
|
- item.webTitle +
|
|
|
- '-' +
|
|
|
- item.id
|
|
|
- ">
|
|
|
- <img :src="
|
|
|
- BaseUrl +
|
|
|
- '/fileupload/' +
|
|
|
- item.filePath +
|
|
|
- item.fileName
|
|
|
- " />
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
-
|
|
|
- <!-- <a class="list-title" @click="viewDetail(item)">{{ item.title }}</a> -->
|
|
|
- <a class="list-title" :href="
|
|
|
- (lang === 'zh-CN' ? '' : '/en') +
|
|
|
- '/news/' +
|
|
|
- item.webTitle +
|
|
|
- '-' +
|
|
|
- item.id
|
|
|
- ">{{ item.title }}</a>
|
|
|
- <div v-if="pcShow" class="list-pc">
|
|
|
- <p class="list-content">{{ item.outline }}</p>
|
|
|
- <span class="list-date">{{ item.publishDate }}</span>
|
|
|
- </div>
|
|
|
- </n-list-item>
|
|
|
- <template #footer>
|
|
|
- <div v-if="!pcShow" class="list-mobile">
|
|
|
- <p class="list-content">{{ item.outline }}</p>
|
|
|
- <span class="list-date">{{ item.publishDate }}</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </n-list>
|
|
|
+ <div class="box_l_list">
|
|
|
+ <template v-for="(item,i) in reportTypes" :key="i">
|
|
|
+ <div class="box_l_list_item" :class="{active:item.dictValue === params?.marketCategory }" @click="handleCategroy(item.dictValue)">
|
|
|
+ <div class="box_l_list_item_l">{{ item.dictLabel }}</div>
|
|
|
+ <div class="box_l_list_item_r ">
|
|
|
+ <div></div>
|
|
|
+ <span class="iconfont icon-duigou"></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
-
|
|
|
- <div class="pagination">
|
|
|
- <n-pagination :page="pageList?.pageNo" :page-count="pageList?.count" :page-size="pageList?.pageSize" size="large" :on-update-page="changePage" :page-slot="7" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box_r">
|
|
|
+ <div class="box_r_list">
|
|
|
+ <div class="box_r_item" v-for="item in pageList?.list" :key="item">
|
|
|
+ <img :src="BaseUrl +'/fileupload/' + item.filePath +item.fileName" alt="">
|
|
|
+ <div class="box_r_item_content">
|
|
|
+ <div class="date">{{formatDateEn(item.publishDate) }}</div>
|
|
|
+ <div class="title">{{ item.title }}</div>
|
|
|
+ <a :href="'/news/' +item.webTitle +'-' +item.id" class="btn">Know More</a>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="pageBox" v-if="pageList?.list.length>0">
|
|
|
+ <n-pagination show-quick-jumper :page-count="pageList?.count" :on-update:page="changePage" :page-slot="6">
|
|
|
+ <template #prev>
|
|
|
+ <div class="pageBox_btn">Previous</div>
|
|
|
+ </template>
|
|
|
+ <template #next>
|
|
|
+ <div class="pageBox_btn">Next</div>
|
|
|
+ </template>
|
|
|
+ <template #goto>
|
|
|
+ <div class="pageBox_inp">Go To</div>
|
|
|
+ </template>
|
|
|
+ </n-pagination>
|
|
|
+ </div>
|
|
|
+ <div class="box-empty" v-if="pageList?.count === 0">
|
|
|
+ <n-empty description="The specified information was not found">
|
|
|
+ <template #extra>
|
|
|
+ <!-- <n-button @click="handleDemand({ id: '', price: 0 }, '0')" round type="primary">{{ t("report.detail.custom") }}</n-button> -->
|
|
|
+ </template>
|
|
|
+ </n-empty>
|
|
|
+ </div>
|
|
|
+ <div class="load">
|
|
|
+ <n-spin size="large">
|
|
|
+ <template #description>Loading...</template>
|
|
|
+ </n-spin>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="load">
|
|
|
- <n-spin size="large">
|
|
|
- <template #description>{{ t("report.content.loading") }}</template>
|
|
|
- </n-spin>
|
|
|
- </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -190,32 +169,48 @@ async function getData() {
|
|
|
spinShow.value = "block";
|
|
|
params.value.lang = lang;
|
|
|
const ret = await marketInfoPageList(params.value);
|
|
|
- setTimeout(() => {
|
|
|
- pageList.value = ret.data;
|
|
|
- spinShow.value = "none";
|
|
|
- }, 500);
|
|
|
+ console.log("aaaaaaa", ret);
|
|
|
+ // setTimeout(() => {
|
|
|
+ pageList.value = ret;
|
|
|
+ spinShow.value = "none";
|
|
|
+ // }, 500);
|
|
|
}
|
|
|
|
|
|
//报告分类
|
|
|
function handleCategroy(type: string | undefined) {
|
|
|
params.value.marketType = "";
|
|
|
- params.value.marketCategory = type;
|
|
|
const language = lang === "zh-CN" ? "" : "en";
|
|
|
- router.push({
|
|
|
- name: "newsCategories",
|
|
|
- params: { marketCategory: type, lang: language },
|
|
|
- });
|
|
|
+ if (params.value.marketCategory == type) {
|
|
|
+ router.push({
|
|
|
+ name: "newsCategories",
|
|
|
+ params: { lang: language },
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ params.value.marketCategory = type;
|
|
|
+ router.push({
|
|
|
+ name: "newsCategories",
|
|
|
+ params: { marketCategory: type, lang: language },
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
//资讯分类
|
|
|
function handleType(type: string | undefined) {
|
|
|
params.value.marketCategory = "";
|
|
|
- params.value.marketType = type;
|
|
|
const language = lang === "zh-CN" ? "" : "en";
|
|
|
- router.push({
|
|
|
- name: "newsCategories",
|
|
|
- params: { marketType: type, lang: language },
|
|
|
- });
|
|
|
+ if (params.value.marketType == type) {
|
|
|
+ params.value.marketType = "";
|
|
|
+ router.push({
|
|
|
+ name: "newsCategories",
|
|
|
+ params: { lang: language },
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ params.value.marketType = type;
|
|
|
+ router.push({
|
|
|
+ name: "newsCategories",
|
|
|
+ params: { marketType: type, lang: language },
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
// 全部
|
|
|
@@ -280,94 +275,376 @@ useHead({
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-.news-content {
|
|
|
- padding-bottom: 30px;
|
|
|
- margin-top: 10px;
|
|
|
- .content {
|
|
|
- background-color: #fff;
|
|
|
- padding: 3em 4em;
|
|
|
- .search {
|
|
|
- .search-keyword {
|
|
|
- width: 70%;
|
|
|
- .n-icon {
|
|
|
- vertical-align: middle;
|
|
|
+@import "~/assets/css/tool.scss";
|
|
|
+.load {
|
|
|
+ display: v-bind("spinShow");
|
|
|
+}
|
|
|
+.page {
|
|
|
+ .top {
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+ margin-top: var(--size-130);
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ > div {
|
|
|
+ width: 100%;
|
|
|
+ padding: var(--size-60) var(--size-176) 0;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ .top_title {
|
|
|
+ font-size: var(--size-48);
|
|
|
+ font-family: Arial, Arial-Bold;
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: left;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ .top_location {
|
|
|
+ font-size: var(--size-14);
|
|
|
+ font-family: Arial, Arial-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ .icon-dkw_guanbi- {
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: var(--size-12);
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ color: #72ff56;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box {
|
|
|
+ background: #f6f7fa;
|
|
|
+ padding: var(--size-30) var(--size-147) var(--size-70);
|
|
|
+ display: flex;
|
|
|
+ .box_l {
|
|
|
+ background: #ffffff;
|
|
|
+ width: var(--size-493);
|
|
|
+ flex-shrink: 0;
|
|
|
+ .box_l_title {
|
|
|
+ width: 100%;
|
|
|
+ padding: var(--size-20) var(--size-30);
|
|
|
+ background: #6aaa87;
|
|
|
+ font-size: var(--size-22);
|
|
|
+ font-family: Arial, Arial-Bold;
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: left;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: var(--size-22);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ span {
|
|
|
+ font-size: var(--size-13);
|
|
|
}
|
|
|
}
|
|
|
- .search-type {
|
|
|
+ .box_l_list {
|
|
|
+ padding: var(--size-12) 0;
|
|
|
+ border: 1px solid #ffffff;
|
|
|
+ border-bottom: var(--size-20) solid #ffffff;
|
|
|
+ background: #f4f7f9;
|
|
|
+ min-height: var(--size-282);
|
|
|
+ .box_l_list_item {
|
|
|
+ padding: var(--size-6) var(--size-30);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ background: #f4f7f9;
|
|
|
+ cursor: pointer;
|
|
|
+ .box_l_list_item_l {
|
|
|
+ font-size: var(--size-18);
|
|
|
+ font-family: Arial, Arial-Regular;
|
|
|
+ color: #639e57;
|
|
|
+ line-height: var(--size-22);
|
|
|
+ }
|
|
|
+ .box_l_list_item_r {
|
|
|
+ width: var(--size-27);
|
|
|
+ height: var(--size-27);
|
|
|
+ border: 1px solid #639e57;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ > div {
|
|
|
+ width: var(--size-17);
|
|
|
+ height: var(--size-17);
|
|
|
+ background: #639e57;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ .box_l_list_item_l {
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ .box_l_list_item_r {
|
|
|
+ background: #639e57;
|
|
|
+ span {
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: var(--size-25);
|
|
|
+ }
|
|
|
+ > div {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .selBox {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: var(--size-8) var(--size-30);
|
|
|
+ > span {
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ .selBox_btn {
|
|
|
+ width: var(--size-68);
|
|
|
+ height: var(--size-44);
|
|
|
+ background: linear-gradient(90deg, #719d58 4%, #43a086 99%);
|
|
|
+ border-radius: var(--size-4);
|
|
|
+ font-size: var(--size-16);
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
|
|
+ color: #ffffff;
|
|
|
+ cursor: pointer;
|
|
|
+ text-align: center;
|
|
|
+ line-height: var(--size-44);
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box_r {
|
|
|
+ margin-left: var(--size-42);
|
|
|
+ flex-grow: 1;
|
|
|
+ .box_r_list {
|
|
|
display: flex;
|
|
|
- margin-top: 20px;
|
|
|
flex-wrap: wrap;
|
|
|
- > a {
|
|
|
- display: block;
|
|
|
- padding: 8px 15px;
|
|
|
- background-color: #eaedf4;
|
|
|
- border-radius: 30px;
|
|
|
- font-size: 14px;
|
|
|
- margin: 0 1rem 1rem 0;
|
|
|
+ .box_r_item {
|
|
|
+ width: var(--size-526);
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: var(--size-10);
|
|
|
+ overflow: hidden;
|
|
|
+ padding: var(--size-19);
|
|
|
+ margin-bottom: var(--size-20);
|
|
|
+ cursor: default;
|
|
|
+ &:nth-child(2n-1) {
|
|
|
+ margin-right: var(--size-20);
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: var(--size-488);
|
|
|
+ height: var(--size-274);
|
|
|
+ border-radius: var(--size-8);
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .box_r_item_content {
|
|
|
+ .date {
|
|
|
+ font-size: var(--size-16);
|
|
|
+ font-family: Arial, Arial-Regular;
|
|
|
+ color: #808080;
|
|
|
+ line-height: var(--size-15);
|
|
|
+ margin-top: var(--size-15);
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ font-size: var(--size-20);
|
|
|
+ font-family: Arial-BoldMT;
|
|
|
+ color: #333333;
|
|
|
+ line-height: var(--size-28);
|
|
|
+ margin-top: var(--size-10);
|
|
|
+ font-weight: 700;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ width: var(--size-108);
|
|
|
+ height: var(--size-29);
|
|
|
+ display: block;
|
|
|
+ background: rgba(0, 0, 0, 0);
|
|
|
+ border: var(--size-1) solid #509f7a;
|
|
|
+ font-size: var(--size-14);
|
|
|
+ font-family: ArialMT;
|
|
|
+ text-align: center;
|
|
|
+ color: #509f7a;
|
|
|
+ line-height: var(--size-27);
|
|
|
+ margin-top: var(--size-20);
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ background: #399ac0;
|
|
|
+ .box_r_item_content {
|
|
|
+ .date {
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ color: #ffffff;
|
|
|
+ border: var(--size-1) solid #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- a.selected {
|
|
|
- background-color: #18a058;
|
|
|
- color: #fff;
|
|
|
+ }
|
|
|
+ .pageBox {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ ::v-deep .n-pagination-item {
|
|
|
+ min-width: var(--size-42);
|
|
|
+ height: var(--size-42);
|
|
|
+ background: #f2f2f2;
|
|
|
+ border: 1px solid #cccccc;
|
|
|
+ border-radius: var(--size-4);
|
|
|
+ font-size: var(--size-14);
|
|
|
+ color: #808080;
|
|
|
+ text-align: center;
|
|
|
+ line-height: var(--size-40);
|
|
|
+ }
|
|
|
+ ::v-deep .n-pagination-item--active {
|
|
|
+ background: rgba(57, 154, 192, 1);
|
|
|
+ color: #ffffff;
|
|
|
+ &:hover {
|
|
|
+ background: rgba(57, 154, 192, 1);
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pageBox_btn {
|
|
|
+ width: var(--size-70);
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ ::v-deep(.n-input__input) {
|
|
|
+ height: var(--size-40);
|
|
|
+ line-height: var(--size-40);
|
|
|
+ }
|
|
|
+ ::v-deep(.n-pagination .n-pagination-quick-jumper .n-input) {
|
|
|
+ border: 1px solid #cccccc;
|
|
|
+ }
|
|
|
+ .pageBox_inp {
|
|
|
+ font-size: var(--size-16);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .img {
|
|
|
- height: 160px;
|
|
|
- width: 200px;
|
|
|
- overflow: hidden;
|
|
|
+ }
|
|
|
+}
|
|
|
+@include responseTo("phone") {
|
|
|
+ .page {
|
|
|
+ .top {
|
|
|
img {
|
|
|
- width: 100%;
|
|
|
- transition: all 0.4s ease;
|
|
|
- height: 100%;
|
|
|
+ height: 100px;
|
|
|
object-fit: cover;
|
|
|
- &:hover {
|
|
|
- transform: scale(1.1);
|
|
|
+ }
|
|
|
+ > div {
|
|
|
+ padding: var(--size-15);
|
|
|
+ .top_title {
|
|
|
+ font-size: var(--size-28);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.list-title {
|
|
|
- display: block;
|
|
|
- font-size: 19px;
|
|
|
- color: #333333;
|
|
|
- font-weight: bold;
|
|
|
- transition: all 0.4s ease;
|
|
|
- padding: 10px 0;
|
|
|
-}
|
|
|
-.list-content {
|
|
|
- font-size: 14px;
|
|
|
- color: #999999;
|
|
|
- line-height: 26px;
|
|
|
- text-overflow: ellipsis;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- overflow: hidden;
|
|
|
- word-wrap: break-word;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- height: 70px;
|
|
|
- margin: 0;
|
|
|
-}
|
|
|
-.list-date {
|
|
|
- display: block;
|
|
|
- font-size: 14px;
|
|
|
- color: #999999;
|
|
|
- line-height: 26px;
|
|
|
-}
|
|
|
-
|
|
|
-.pagination {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- padding-top: 40px;
|
|
|
- border-top: 1px solid rgb(239 239 245);
|
|
|
-}
|
|
|
-.content-list-item {
|
|
|
- padding: 40px 20px;
|
|
|
-}
|
|
|
+ .box {
|
|
|
+ padding: var(--size-15);
|
|
|
+ width: 100%;
|
|
|
+ display: block;
|
|
|
+ .box_l {
|
|
|
+ width: 100%;
|
|
|
+ .box_l_list {
|
|
|
+ .box_l_list_item {
|
|
|
+ padding: var(--size-6) var(--size-20);
|
|
|
+ .box_l_list_item_l {
|
|
|
+ font-size: var(--size-16);
|
|
|
+ }
|
|
|
+ .box_l_list_item_r {
|
|
|
+ width: var(--size-20);
|
|
|
+ height: var(--size-20);
|
|
|
+ > div {
|
|
|
+ width: var(--size-12);
|
|
|
+ height: var(--size-12);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .active .box_l_list_item_r span {
|
|
|
+ font-size: var(--size-18);
|
|
|
+ }
|
|
|
+ .selBox {
|
|
|
+ padding: var(--size-6) var(--size-20);
|
|
|
+ .selBox_btn {
|
|
|
+ width: var(--size-52);
|
|
|
+ height: var(--size-34);
|
|
|
+ border-radius: var(--size-4);
|
|
|
+ font-size: var(--size-16);
|
|
|
+ line-height: var(--size-34);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box_r {
|
|
|
+ margin-left: 0;
|
|
|
+ margin-top: var(--size-20);
|
|
|
+ .box_r_list {
|
|
|
+ justify-content: space-between;
|
|
|
+ .box_r_item {
|
|
|
+ width: 48%;
|
|
|
+ padding: var(--size-10) var(--size-10) var(--size-20);
|
|
|
+ margin-right: 0 !important;
|
|
|
+ margin-bottom: var(--size-10);
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .box_r_item_content {
|
|
|
+ .date {
|
|
|
+ margin-top: var(--size-5);
|
|
|
+ font-size: var(--size-14);
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ font-size: var(--size-16);
|
|
|
+ line-height: var(--size-20);
|
|
|
+ margin-top: var(--size-5);
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ margin-top: var(--size-15);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pageBox {
|
|
|
+ ::v-deep .n-pagination-item {
|
|
|
+ min-width: var(--size-21);
|
|
|
+ height: var(--size-21);
|
|
|
+ border-radius: var(--size-2);
|
|
|
+ font-size: var(--size-8);
|
|
|
+ line-height: var(--size-20);
|
|
|
+ }
|
|
|
+ .pageBox_btn {
|
|
|
+ width: var(--size-35);
|
|
|
+ }
|
|
|
+ ::v-deep(.n-input__input) {
|
|
|
+ height: var(--size-20);
|
|
|
+ line-height: var(--size-20);
|
|
|
+ font-size: var(--size-9);
|
|
|
+ }
|
|
|
+ .pageBox_inp {
|
|
|
+ font-size: var(--size-8);
|
|
|
+ }
|
|
|
|
|
|
-.load {
|
|
|
- display: v-bind("spinShow");
|
|
|
+ ::v-deep(.n-pagination .n-pagination-quick-jumper .n-input) {
|
|
|
+ width: var(--size-35);
|
|
|
+ }
|
|
|
+ ::v-deep(.n-input .n-input__input-el) {
|
|
|
+ height: var(--size-20);
|
|
|
+ line-height: var(--size-20);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
