|
|
@@ -1,111 +1,141 @@
|
|
|
<template>
|
|
|
- <div class="search-detail">
|
|
|
+ <div class="search-detail" v-loading="loading">
|
|
|
<Header
|
|
|
:headerBg="'#299772'"
|
|
|
:headerBorder="'#30A47D'"
|
|
|
:userBg="'rgba(0, 0, 0, 0.08)'"
|
|
|
- :LoginNavIndex="LoginNavIndex"
|
|
|
+ :LoginNavIndex="-1"
|
|
|
/>
|
|
|
<div class="banner">
|
|
|
- <a class="goback" @click="$router.go(-1)"><i class="el-icon-arrow-left"></i>返回</a>
|
|
|
- <div class="banner-inner">
|
|
|
- <img src="../../assets/icon-search-small.png" />
|
|
|
- <SearchInput class="search-compent" :searchQuery="searchQuery" />
|
|
|
- </div>
|
|
|
+ <a class="goback" @click="$router.go(-1)"
|
|
|
+ ><i class="el-icon-arrow-left"></i>返回</a
|
|
|
+ >
|
|
|
+ <div class="banner-inner">
|
|
|
+ <img src="../../assets/icon-search-small.png" />
|
|
|
+ <SearchInput
|
|
|
+ class="search-compent"
|
|
|
+ :searchQuery="searchQuery"
|
|
|
+ :selectIndex="selectIndex"
|
|
|
+ @changeSelectIndex="changeSelectIndex"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="main">
|
|
|
- <!-- <ul class="typelist">
|
|
|
+ <!-- <ul class="typelist">
|
|
|
<li class="typeitem" :class="[typeIndex===indexT?'active':'']" v-for="(itemT,indexT) in typeList" :key="indexT" @click="handleTypeIndex('typeIndex',indexT)">
|
|
|
<svg-icon :icon-class="itemT.img" className="icon-img"></svg-icon>
|
|
|
<span class="OPPOSans">{{itemT.name}}</span>
|
|
|
<b class="OPPOSans">{{itemT.value}}</b>
|
|
|
</li>
|
|
|
</ul> -->
|
|
|
- <div class="main-inner">
|
|
|
- <ul v-if="typeList&&typeList.length>0" class="gradelist">
|
|
|
- <li :class="['gradeitem',indeG===typeIndex?'active':'']" v-for="(itemG,indeG) in typeList" :key="indeG" @click="handleTypeIndex('typeIndex',indeG)">
|
|
|
- {{itemG.name+' '+itemG.value}}
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <ul v-if="gradeList&&gradeList.length>0" class="gradelist">
|
|
|
- <li :class="['gradeitem',indeG===gradeIndex?'active':'']" v-for="(itemG,indeG) in gradeList" :key="indeG" @click="handleTypeIndex('gradeIndex',indeG)">
|
|
|
- {{itemG.name}}
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <ul v-if="yearList&&yearList.length>0" class="gradelist">
|
|
|
- <li :class="['gradeitem',indeG===yearIndex?'active':'']" v-for="(itemG,indeG) in yearList" :key="indeG" @click="handleTypeIndex('yearIndex',indeG)">
|
|
|
- {{itemG.label}}
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <p class="timeconsume">982条结果，耗时 300ms。</p>
|
|
|
- <div class="searchChangebox">
|
|
|
- <div class="searchChange" :class="[item.sortName==sortField?'active':'']" v-for="(item,indexC) in changeList" :key="indexC">
|
|
|
- <span>
|
|
|
- {{
|
|
|
- item.name
|
|
|
- }}
|
|
|
- </span>
|
|
|
- <div :class="['sort']">
|
|
|
- <div>
|
|
|
- <svg-icon icon-class="up" className="icon-up" :class="[item.sort=='up'?'active':'']" @click="SortEvent('up', item.name, item.sortName)"></svg-icon>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <svg-icon icon-class="down" className="icon-down" :class="[item.sort=='down'?'active':'']" @click="SortEvent('down', item.name, item.sortName)"></svg-icon>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="main-inner">
|
|
|
+ <!-- <ul v-if="typeList && typeList.length > 0" class="gradelist">
|
|
|
+ <li
|
|
|
+ :class="['gradeitem', indeG === typeIndex ? 'active' : '']"
|
|
|
+ v-for="(itemG, indeG) in typeList"
|
|
|
+ :key="indeG"
|
|
|
+ @click="handleTypeIndex('typeIndex', indeG)"
|
|
|
+ >
|
|
|
+ {{ itemG.name + " " + itemG.value }}
|
|
|
+ </li>
|
|
|
+ </ul> -->
|
|
|
+ <ul v-if="gradeList && gradeList.length > 0" class="gradelist">
|
|
|
+ <li
|
|
|
+ :class="[
|
|
|
+ 'gradeitem',
|
|
|
+ itemG.study_phase === gradeIndex ? 'active' : '',
|
|
|
+ ]"
|
|
|
+ v-for="(itemG, indeG) in gradeList"
|
|
|
+ :key="indeG"
|
|
|
+ @click="handleTypeIndex('gradeIndex', itemG.study_phase)"
|
|
|
+ >
|
|
|
+ {{ itemG.study_phase_name }}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <ul v-if="yearList && yearList.length > 0" class="gradelist">
|
|
|
+ <li
|
|
|
+ :class="['gradeitem', itemG.value === yearIndex ? 'active' : '']"
|
|
|
+ v-for="(itemG, indeG) in yearList"
|
|
|
+ :key="indeG"
|
|
|
+ @click="handleTypeIndex('yearIndex', itemG.value)"
|
|
|
+ >
|
|
|
+ {{ itemG.label }}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <p class="timeconsume">
|
|
|
+ {{ courseTotal }}条结果，耗时
|
|
|
+ {{ takeTime >= 1000 ? takeTime / 1000 + "s" : takeTime + "ms" }}。
|
|
|
+ </p>
|
|
|
+ <div class="searchChangebox">
|
|
|
+ <div
|
|
|
+ class="searchChange"
|
|
|
+ :class="[item.sortName == sortField ? 'active' : '']"
|
|
|
+ v-for="(item, indexC) in changeList"
|
|
|
+ :key="indexC"
|
|
|
+ >
|
|
|
+ <span>
|
|
|
+ {{ item.name }}
|
|
|
+ </span>
|
|
|
+ <div :class="['sort']">
|
|
|
+ <div>
|
|
|
+ <svg-icon
|
|
|
+ icon-class="up"
|
|
|
+ className="icon-up"
|
|
|
+ :class="[item.sort == 'up' ? 'active' : '']"
|
|
|
+ @click="SortEvent('up', item.name, item.sortName)"
|
|
|
+ ></svg-icon>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <svg-icon
|
|
|
+ icon-class="down"
|
|
|
+ className="icon-down"
|
|
|
+ :class="[item.sort == 'down' ? 'active' : '']"
|
|
|
+ @click="SortEvent('down', item.name, item.sortName)"
|
|
|
+ ></svg-icon>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <template v-if="searchList&&searchList.length>0">
|
|
|
- <div class="search-item" v-for="(itemS,indexS) in searchList" :key="indexS" @click="handleLink(itemS)">
|
|
|
- <el-image
|
|
|
- :src="itemS.src"
|
|
|
- :fit="'cover'">
|
|
|
- </el-image>
|
|
|
- <div class="search-inner">
|
|
|
- <div class="top">
|
|
|
- <h2 v-html="itemS.title"></h2>
|
|
|
- <span v-html="itemS.author"></span>
|
|
|
- </div>
|
|
|
- <div class="content" v-html="itemS.content"></div>
|
|
|
- <div class="bottom">
|
|
|
- <span v-if="itemS.periodicalNumber">{{itemS.periodicalNumber}}</span>
|
|
|
- <span v-if="itemS.gradetype">{{itemS.gradetype}}</span>
|
|
|
- <span v-if="itemS.wordLength">长度：{{itemS.wordLength}}</span>
|
|
|
- <span v-if="itemS.wordNumber">词数：{{itemS.wordNumber}}</span>
|
|
|
- <span v-if="itemS.difficulty">难度：{{itemS.difficulty}}</span>
|
|
|
- <span v-if="itemS.approximation">近似度{{itemS.approximation}}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <el-pagination
|
|
|
- background
|
|
|
- :current-page="currentPage"
|
|
|
- :page-size="page_capacity"
|
|
|
- :page-sizes="[10, 20, 30, 40, 50]"
|
|
|
- :total="courseTotal"
|
|
|
- layout="sizes, prev, pager, next, jumper"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- @size-change="handleSizeChange"
|
|
|
- />
|
|
|
-
|
|
|
- </template>
|
|
|
- <div class="search-list" v-if="searchList2&&searchList2.length>0">
|
|
|
- <div
|
|
|
- v-for="(item,index) in searchList2"
|
|
|
- :key="index+'todayNew'"
|
|
|
- :class="['search-items',index%5==4?'margin0':'']"
|
|
|
- >
|
|
|
- <BookCard
|
|
|
- :item="item"
|
|
|
- :headerBg="headerBg"
|
|
|
- :headerBorder="headerBorder"
|
|
|
- :userBg="userBg"
|
|
|
- :LoginNavIndex="LoginNavIndex"
|
|
|
- :previousPage="'搜索'"
|
|
|
- />
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <template v-if="searchList && searchList.length > 0">
|
|
|
+ <div
|
|
|
+ class="search-item"
|
|
|
+ v-for="(itemS, indexS) in searchList"
|
|
|
+ :key="indexS"
|
|
|
+ @click="handleLink(itemS)"
|
|
|
+ >
|
|
|
+ <el-image :src="itemS.src" :fit="'cover'"> </el-image>
|
|
|
+ <div class="search-inner">
|
|
|
+ <div class="top">
|
|
|
+ <h2 v-html="itemS.title"></h2>
|
|
|
+ <span v-html="itemS.author"></span>
|
|
|
+ </div>
|
|
|
+ <div class="content" v-html="itemS.content"></div>
|
|
|
+ <div class="bottom">
|
|
|
+ <span v-if="itemS.iss_no">{{ itemS.iss_no }}</span>
|
|
|
+ <span v-if="itemS.study_phase_name">{{
|
|
|
+ itemS.study_phase_name
|
|
|
+ }}</span>
|
|
|
+ <span v-if="itemS.wc">长度：{{ itemS.wc }}</span>
|
|
|
+ <span v-if="itemS.wdc">词数：{{ itemS.wdc }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ :current-page="currentPage"
|
|
|
+ :page-size="page_capacity"
|
|
|
+ :page-sizes="[10, 20, 30, 40, 50]"
|
|
|
+ :total="courseTotal"
|
|
|
+ layout="sizes, prev, pager, next, jumper"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <div class="nodata" v-else>
|
|
|
+ <img src="../../assets/nodata.png" />
|
|
|
+ <p>找不到文件</p>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -114,8 +144,8 @@
|
|
|
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
//例如：import 《组件名称》from ‘《组件路径》';
|
|
|
import Header from "../../components/Header.vue";
|
|
|
-import SearchInput from "./components/SearchInput.vue"
|
|
|
-import BookCard from "@/components/common/BookCard.vue"
|
|
|
+import SearchInput from "./components/SearchInput.vue";
|
|
|
+import BookCard from "@/components/common/BookCard.vue";
|
|
|
import { getLogin } from "@/api/ajax";
|
|
|
export default {
|
|
|
//import引入的组件需要注入到对象中才能使用
|
|
|
@@ -124,226 +154,78 @@ export default {
|
|
|
data() {
|
|
|
//这里存放数据
|
|
|
return {
|
|
|
- searchQuery: this.$route.query.content?this.$route.query.content:'',
|
|
|
- config: this.$route.query.headerConfig?decodeURIComponent(this.$route.query.headerConfig):'',
|
|
|
+ searchQuery: this.$route.query.content ? this.$route.query.content : "",
|
|
|
+ config: this.$route.query.headerConfig
|
|
|
+ ? decodeURIComponent(this.$route.query.headerConfig)
|
|
|
+ : "",
|
|
|
LoginNavIndex: 0,
|
|
|
- userBg: 'rgba(0, 0, 0, 0.24)',
|
|
|
- headerBorder: '#5C5C5C',
|
|
|
- headerBg: '#1F1F1F',
|
|
|
- typeList: [
|
|
|
- {
|
|
|
- name:'全部',
|
|
|
- value:'',
|
|
|
- img:'quanbu'
|
|
|
- },
|
|
|
- {
|
|
|
- name:'画刊',
|
|
|
- value:'24',
|
|
|
- img:'huakan'
|
|
|
- },
|
|
|
- {
|
|
|
- name:'报纸',
|
|
|
- value:'156',
|
|
|
- img:'baozhi'
|
|
|
- },
|
|
|
- {
|
|
|
- name:'合刊',
|
|
|
- value:'47',
|
|
|
- img:'hekan'
|
|
|
- },
|
|
|
- {
|
|
|
- name:'练习册',
|
|
|
- value:'2',
|
|
|
- img:'xiti'
|
|
|
- },
|
|
|
- {
|
|
|
- name:'课程',
|
|
|
- value:'5',
|
|
|
- img:'kecheng'
|
|
|
- }
|
|
|
- ],
|
|
|
+ userBg: "rgba(0, 0, 0, 0.24)",
|
|
|
+ headerBorder: "#5C5C5C",
|
|
|
+ headerBg: "#1F1F1F",
|
|
|
+ selectIndex: this.$route.query.selectIndex
|
|
|
+ ? this.$route.query.selectIndex * 1
|
|
|
+ : 0,
|
|
|
typeIndex: 0,
|
|
|
- gradeList:[
|
|
|
- {
|
|
|
- name:'全部',
|
|
|
- value: ''
|
|
|
- },
|
|
|
- {
|
|
|
- name:'少儿画刊',
|
|
|
- value: '1'
|
|
|
- },
|
|
|
- {
|
|
|
- name:'小学版',
|
|
|
- value: '2'
|
|
|
- },
|
|
|
- {
|
|
|
- name:'初一版',
|
|
|
- value: '3'
|
|
|
- },
|
|
|
- {
|
|
|
- name:'初二版',
|
|
|
- value: '4'
|
|
|
- },
|
|
|
- {
|
|
|
- name:'初三版',
|
|
|
- value: '5'
|
|
|
- },
|
|
|
- {
|
|
|
- name:'高一版',
|
|
|
- value: '6'
|
|
|
- },
|
|
|
+ gradeList: [],
|
|
|
+ yearList: [
|
|
|
{
|
|
|
- name:'高二版',
|
|
|
- value: '7'
|
|
|
+ label: "全部",
|
|
|
+ value: null,
|
|
|
},
|
|
|
],
|
|
|
- yearList:[
|
|
|
- {
|
|
|
- label:'全部',
|
|
|
- value: -1
|
|
|
- }
|
|
|
- ],
|
|
|
- gradeIndex: 0,
|
|
|
- yearIndex: 0,
|
|
|
+ gradeIndex: null,
|
|
|
+ yearIndex: null,
|
|
|
sortType: 0,
|
|
|
- sortField: "level_id",
|
|
|
+ sortField: "",
|
|
|
changeList: [
|
|
|
{
|
|
|
name: "长度",
|
|
|
sort: "",
|
|
|
- sortName: "cd",
|
|
|
+ sortName: "wc",
|
|
|
},
|
|
|
{
|
|
|
name: "词数",
|
|
|
sort: "",
|
|
|
- sortName: "cs",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "语篇难度",
|
|
|
- sort: "",
|
|
|
- sortName: "ypnd",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "近似度",
|
|
|
- sort: "",
|
|
|
- sortName: "jsd",
|
|
|
- }
|
|
|
- ],
|
|
|
- searchList: [
|
|
|
- {
|
|
|
- src: require('../../assets/bookcard-image.png'),
|
|
|
- title: 'Recognizing key scientists',
|
|
|
- author: 'Teens',
|
|
|
- content: "Every year, <span class='lightbg'>China's</span> top science award draws public attention to great scientists and their outstanding contributions to scientific and technological innovation. It's the State Preeminent Science and Technology Award.",
|
|
|
- periodicalNumber: '第381期', // 期刊数
|
|
|
- gradetype: '小学版',
|
|
|
- wordLength: '245',
|
|
|
- wordNumber: '43',
|
|
|
- difficulty: '2.13',
|
|
|
- approximation: '98%'
|
|
|
+ sortName: "wdc",
|
|
|
},
|
|
|
- {
|
|
|
- src: require('../../assets/bookcard-image.png'),
|
|
|
- title: '2023 年画刊合刊',
|
|
|
- author: 'Teead',
|
|
|
- content: "There were perfectly cogent reasons why Julian Cavendish should be told of the Maior's impending return.",
|
|
|
- periodicalNumber: '第349期', // 期刊数
|
|
|
- gradetype: '高一版',
|
|
|
- wordLength: '256',
|
|
|
- wordNumber: '27',
|
|
|
- difficulty: '3.52',
|
|
|
- approximation: '70%'
|
|
|
- }
|
|
|
],
|
|
|
+ searchList: [],
|
|
|
currentPage: 1, // 当前页码
|
|
|
page_capacity: 10, // 每页条数
|
|
|
- courseTotal: 20, // 数据总条数
|
|
|
- searchList2: [
|
|
|
- {
|
|
|
- src: require('../../assets/bookcard-image.png'),
|
|
|
- name: "名称名称名称名称名称名称名称名称名称名称名称名称",
|
|
|
- price: "3.00",
|
|
|
- oldprice: "3.00",
|
|
|
- author: "作者",
|
|
|
- score: 3,
|
|
|
- progress: "90%",
|
|
|
- time:'2023/4/16 19:00'
|
|
|
- },
|
|
|
- {
|
|
|
- src: require('../../assets/bookcard-image.png'),
|
|
|
- name: "名称名称名称名称名称名称名称名称名称名称名称名称",
|
|
|
- price: "3.00",
|
|
|
- oldprice: "3.00",
|
|
|
- author: "作者",
|
|
|
- score: 3,
|
|
|
- progress: "90%",
|
|
|
- time:'2023/4/16 19:00'
|
|
|
- },
|
|
|
- {
|
|
|
- src: require('../../assets/bookcard-image.png'),
|
|
|
- name: "名称名称名称名称名称名称名称名称名称名称名称名称",
|
|
|
- price: "3.00",
|
|
|
- oldprice: "3.00",
|
|
|
- author: "作者",
|
|
|
- score: 3,
|
|
|
- progress: "90%",
|
|
|
- time:'2023/4/16 19:00'
|
|
|
- },
|
|
|
- {
|
|
|
- src: require('../../assets/bookcard-image.png'),
|
|
|
- name: "名称名称名称名称名称名称名称名称名称名称名称名称",
|
|
|
- price: "3.00",
|
|
|
- oldprice: "3.00",
|
|
|
- author: "作者",
|
|
|
- score: 3,
|
|
|
- progress: "90%",
|
|
|
- time:'2023/4/16 19:00'
|
|
|
- },
|
|
|
- {
|
|
|
- src: require('../../assets/bookcard-image.png'),
|
|
|
- name: "名称名称名称名称名称名称名称名称名称名称名称名称",
|
|
|
- price: "3.00",
|
|
|
- oldprice: "3.00",
|
|
|
- author: "作者",
|
|
|
- score: 3,
|
|
|
- progress: "90%",
|
|
|
- time:'2023/4/16 19:00'
|
|
|
- },
|
|
|
- {
|
|
|
- src: require('../../assets/bookcard-image.png'),
|
|
|
- name: "名称名称名称名称名称名称名称名称名称名称名称名称",
|
|
|
- price: "3.00",
|
|
|
- oldprice: "3.00",
|
|
|
- author: "作者",
|
|
|
- score: 3,
|
|
|
- progress: "90%",
|
|
|
- time:'2023/4/16 19:00'
|
|
|
- },
|
|
|
- ],
|
|
|
- }
|
|
|
+ courseTotal: 0, // 数据总条数
|
|
|
+ timer: null,
|
|
|
+ takeTime: 0, //耗时
|
|
|
+ loading: false,
|
|
|
+ };
|
|
|
},
|
|
|
//计算属性 类似于data概念
|
|
|
computed: {},
|
|
|
//监控data中数据变化
|
|
|
- watch: {},
|
|
|
+ watch: {
|
|
|
+ searchQuery: {
|
|
|
+ handler(val, oldVal) {
|
|
|
+ if (val !== oldVal) {
|
|
|
+ this.currentPage = 1;
|
|
|
+ this.searchArticle();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 深度观察监听
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
//方法集合
|
|
|
methods: {
|
|
|
- handleTypeIndex(type,index){
|
|
|
- this[type] = index
|
|
|
+ handleTypeIndex(type, index) {
|
|
|
+ this[type] = index;
|
|
|
+ this.currentPage = 1;
|
|
|
+ this.searchArticle();
|
|
|
},
|
|
|
SortEvent(type, name, sortName) {
|
|
|
let sort = "";
|
|
|
this.changeList.forEach((item) => {
|
|
|
if (item.name == name) {
|
|
|
- // if (!item.sort || item.sort == "up") {
|
|
|
- // item.sort = "down";
|
|
|
- // sort = "down";
|
|
|
- // } else if (item.sort == "down") {
|
|
|
- // item.sort = "up";
|
|
|
- // sort = "up";
|
|
|
- // }
|
|
|
- item.sort = type;
|
|
|
- sort = type;
|
|
|
+ item.sort = type;
|
|
|
+ sort = type;
|
|
|
} else {
|
|
|
item.sort = "";
|
|
|
}
|
|
|
@@ -354,389 +236,456 @@ export default {
|
|
|
this.sortType = 0;
|
|
|
}
|
|
|
this.sortField = sortName;
|
|
|
+ this.currentPage = 1;
|
|
|
+ this.searchArticle();
|
|
|
},
|
|
|
// 跳转文章
|
|
|
- handleLink(item){
|
|
|
- let url = this.config + '&&&搜索'
|
|
|
- this.$router.push({
|
|
|
- path: "/bookItem",
|
|
|
- query: {
|
|
|
- headerConfig: encodeURIComponent(url)
|
|
|
- },
|
|
|
- });
|
|
|
+ handleLink(item) {
|
|
|
+ let url = this.config + "&&&搜索";
|
|
|
+ this.$router.push({
|
|
|
+ path: "/articleDetail",
|
|
|
+ query: {
|
|
|
+ headerConfig: encodeURIComponent(url),
|
|
|
+ iss_id: item.iss_id,
|
|
|
+ id: item.art_id,
|
|
|
+ },
|
|
|
+ });
|
|
|
},
|
|
|
// 切换每页条数
|
|
|
handleSizeChange(val) {
|
|
|
this.currentPage = 1;
|
|
|
this.page_capacity = val;
|
|
|
+ this.searchArticle();
|
|
|
},
|
|
|
// 切换页码
|
|
|
handleCurrentChange(val) {
|
|
|
this.currentPage = val;
|
|
|
+ this.searchArticle();
|
|
|
+ },
|
|
|
+ // 学段列表
|
|
|
+ getStudyList() {
|
|
|
+ let MethodName = "/OrgServer/DictManager/GetStudyPhaseList";
|
|
|
+ getLogin(MethodName, {})
|
|
|
+ .then((res) => {
|
|
|
+ if (res.status === 1) {
|
|
|
+ let gradeList = [
|
|
|
+ {
|
|
|
+ study_phase: null,
|
|
|
+ study_phase_name: "全部",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ this.gradeList = gradeList.concat(res.study_phase_list);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
},
|
|
|
// 获取年份列表
|
|
|
- getYearList(){
|
|
|
- this.yearList = [
|
|
|
- {
|
|
|
- value: -1,
|
|
|
- label: '全部'
|
|
|
- }
|
|
|
- ]
|
|
|
- let yearList = []
|
|
|
- let MethodName = "/ShopServer/Client/ShopHomeQuery/GetIssueYearLabelList"
|
|
|
- getLogin(MethodName, {})
|
|
|
+ getYearList() {
|
|
|
+ this.yearList = [
|
|
|
+ {
|
|
|
+ value: null,
|
|
|
+ label: "全部",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ let yearList = [];
|
|
|
+ let MethodName = "/ShopServer/Client/ShopHomeQuery/GetIssueYearLabelList";
|
|
|
+ getLogin(MethodName, {
|
|
|
+ goods_type: 2,
|
|
|
+ })
|
|
|
.then((res) => {
|
|
|
- if(res.status===1){
|
|
|
- res.year_label_list.forEach(nowYear => {
|
|
|
- let obj = {
|
|
|
- value: nowYear,
|
|
|
- label: nowYear
|
|
|
- }
|
|
|
- yearList.push(obj)
|
|
|
- })
|
|
|
- this.yearList = this.yearList.concat(yearList)
|
|
|
- }
|
|
|
+ if (res.status === 1) {
|
|
|
+ res.year_label_list.forEach((nowYear) => {
|
|
|
+ let obj = {
|
|
|
+ value: nowYear,
|
|
|
+ label: nowYear,
|
|
|
+ };
|
|
|
+ yearList.push(obj);
|
|
|
+ });
|
|
|
+ this.yearList = this.yearList.concat(yearList);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ },
|
|
|
+ // 查询搜索内容
|
|
|
+ searchArticle() {
|
|
|
+ this.loading = true;
|
|
|
+ this.takeTime = 0;
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ this.takeTime += 20;
|
|
|
+ }, 20);
|
|
|
+ let orderObj = null;
|
|
|
+ if (this.sortField) {
|
|
|
+ orderObj = {
|
|
|
+ name: this.sortField,
|
|
|
+ asc: !this.sortType,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ let MethodName = "/PaperServer/Client/Search/SearchArticle";
|
|
|
+ let data = {
|
|
|
+ word: this.searchQuery,
|
|
|
+ page_size: this.page_capacity,
|
|
|
+ page_no: this.currentPage,
|
|
|
+ only_my_bought: this.selectIndex,
|
|
|
+ study_phase: this.gradeIndex,
|
|
|
+ release_year: this.yearIndex,
|
|
|
+ order_bys: orderObj ? [orderObj] : [],
|
|
|
+ };
|
|
|
+ getLogin(MethodName, data)
|
|
|
+ .then((res) => {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ this.loading = false;
|
|
|
+ if (res.status === 1) {
|
|
|
+ this.courseTotal = res.data.total;
|
|
|
+ this.searchList = res.data.results;
|
|
|
+ }
|
|
|
})
|
|
|
.catch(() => {
|
|
|
- this.loading = false
|
|
|
+ this.loading = false;
|
|
|
+ clearInterval(this.timer);
|
|
|
});
|
|
|
-
|
|
|
- }
|
|
|
+ },
|
|
|
+ changeSelectIndex(val) {
|
|
|
+ this.selectIndex = val;
|
|
|
+ },
|
|
|
},
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
created() {
|
|
|
- if(this.config){
|
|
|
- let arr = this.config.split('&&&')
|
|
|
- this.LoginNavIndex = arr[0] * 1
|
|
|
- this.userBg = arr[1]
|
|
|
- this.headerBorder = arr[2]
|
|
|
- this.headerBg = arr[3]
|
|
|
+ if (this.config) {
|
|
|
+ let arr = this.config.split("&&&");
|
|
|
+ this.LoginNavIndex = arr[0] * 1;
|
|
|
+ this.userBg = arr[1];
|
|
|
+ this.headerBorder = arr[2];
|
|
|
+ this.headerBg = arr[3];
|
|
|
}
|
|
|
- this.getYearList()
|
|
|
+ this.getStudyList();
|
|
|
+ this.getYearList();
|
|
|
+ this.searchArticle();
|
|
|
},
|
|
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
- mounted() {
|
|
|
- },
|
|
|
+ mounted() {},
|
|
|
//生命周期-创建之前
|
|
|
- beforeCreated() { },
|
|
|
+ beforeCreated() {},
|
|
|
//生命周期-挂载之前
|
|
|
- beforeMount() { },
|
|
|
+ beforeMount() {},
|
|
|
//生命周期-更新之前
|
|
|
- beforUpdate() { },
|
|
|
+ beforUpdate() {},
|
|
|
//生命周期-更新之后
|
|
|
- updated() { },
|
|
|
+ updated() {},
|
|
|
//生命周期-销毁之前
|
|
|
- beforeDestory() { },
|
|
|
+ beforeDestory() {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ },
|
|
|
//生命周期-销毁完成
|
|
|
- destoryed() { },
|
|
|
+ destoryed() {},
|
|
|
//如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
- activated() { }
|
|
|
-}
|
|
|
+ activated() {},
|
|
|
+};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
/* @import url(); 引入css类 */
|
|
|
-.search-detail{
|
|
|
+.search-detail {
|
|
|
+ width: 100%;
|
|
|
+ .banner {
|
|
|
width: 100%;
|
|
|
- .banner{
|
|
|
- width: 100%;
|
|
|
- height: 88px;
|
|
|
- background: #299772;
|
|
|
- position: relative;
|
|
|
- .goback{
|
|
|
- position: absolute;
|
|
|
- left: 24px;
|
|
|
- top: 24px;
|
|
|
- width: 96px;
|
|
|
- height: 40px;
|
|
|
- display: block;
|
|
|
- text-align: center;
|
|
|
- cursor: pointer;
|
|
|
- color: #FFFFFF;
|
|
|
- line-height: 40px;
|
|
|
- .el-icon-arrow-left{
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- text-align: center;
|
|
|
- line-height: 24px;
|
|
|
- margin: 0 4px;
|
|
|
- }
|
|
|
+ height: 88px;
|
|
|
+ background: #299772;
|
|
|
+ position: relative;
|
|
|
+ .goback {
|
|
|
+ position: absolute;
|
|
|
+ left: 24px;
|
|
|
+ top: 24px;
|
|
|
+ width: 96px;
|
|
|
+ height: 40px;
|
|
|
+ display: block;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 40px;
|
|
|
+ .el-icon-arrow-left {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 24px;
|
|
|
+ margin: 0 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .banner-inner {
|
|
|
+ width: 868px;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 0 auto;
|
|
|
+ position: relative;
|
|
|
+ > img {
|
|
|
+ width: 40px;
|
|
|
+ margin-right: 24px;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 24px;
|
|
|
+ margin-left: -434px;
|
|
|
+ }
|
|
|
+ .search-compent {
|
|
|
+ position: absolute;
|
|
|
+ top: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .main {
|
|
|
+ width: 100%;
|
|
|
+ background: #ffffff;
|
|
|
+ max-height: calc(100vh - 160px);
|
|
|
+ overflow-y: scroll;
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .typelist {
|
|
|
+ margin: 32px 0;
|
|
|
+ padding: 0;
|
|
|
+ list-style: none;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ li {
|
|
|
+ width: 200px;
|
|
|
+ height: 48px;
|
|
|
+ border-radius: 30px;
|
|
|
+ padding: 12px 24px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ border: 1px solid #e5e6eb;
|
|
|
+ &.active {
|
|
|
+ border-color: #3459d2;
|
|
|
+ background: #eef3ff;
|
|
|
+ .icon-img,
|
|
|
+ span {
|
|
|
+ color: #175dff;
|
|
|
+ }
|
|
|
+ b {
|
|
|
+ color: #ed5f00;
|
|
|
+ }
|
|
|
}
|
|
|
- .banner-inner{
|
|
|
- width: 868px;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin: 0 auto;
|
|
|
- position: relative;
|
|
|
- > img{
|
|
|
- width: 40px;
|
|
|
- margin-right: 24px;
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 24px;
|
|
|
- margin-left: -434px;
|
|
|
- }
|
|
|
- .search-compent{
|
|
|
- position: absolute;
|
|
|
- top: 16px;
|
|
|
- }
|
|
|
+ svg {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ margin-right: 16px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ color: #2f3742;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ flex: 1;
|
|
|
}
|
|
|
+ b {
|
|
|
+ color: #929ca8;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- .main{
|
|
|
- width: 100%;
|
|
|
- background: #FFFFFF;
|
|
|
- max-height: calc(100vh - 160px);
|
|
|
- overflow-y: scroll;
|
|
|
- &::-webkit-scrollbar {
|
|
|
- display: none;
|
|
|
+ .main-inner {
|
|
|
+ width: 1200px;
|
|
|
+ margin: 0 auto;
|
|
|
+ // border-radius: 8px;
|
|
|
+ padding: 34px 40px;
|
|
|
+ ul {
|
|
|
+ list-style: none;
|
|
|
+ display: flex;
|
|
|
+ flex-flow: wrap;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ li {
|
|
|
+ padding: 8px 15px;
|
|
|
+ cursor: pointer;
|
|
|
+ margin: 6px 16px 6px 0;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #2f3742;
|
|
|
+ &.active {
|
|
|
+ background: #e7eeff;
|
|
|
+ border-radius: 4px;
|
|
|
+ color: #175dff;
|
|
|
+ }
|
|
|
}
|
|
|
- .typelist{
|
|
|
- margin: 32px 0;
|
|
|
- padding: 0;
|
|
|
- list-style: none;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- li{
|
|
|
- width: 200px;
|
|
|
- height: 48px;
|
|
|
- border-radius: 30px;
|
|
|
- padding: 12px 24px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- cursor: pointer;
|
|
|
- border: 1px solid #E5E6EB;
|
|
|
- &.active{
|
|
|
- border-color: #3459D2;
|
|
|
- background: #EEF3FF;
|
|
|
- .icon-img,span{
|
|
|
- color: #175DFF;
|
|
|
- }
|
|
|
- b{
|
|
|
- color: #ED5F00;
|
|
|
- }
|
|
|
- }
|
|
|
- svg{
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- margin-right: 16px;
|
|
|
- }
|
|
|
- span{
|
|
|
- color: #2F3742;
|
|
|
- font-weight: 700;
|
|
|
- font-size: 16px;
|
|
|
- line-height: 24px;
|
|
|
- flex: 1;
|
|
|
+ }
|
|
|
+ .searchChangebox {
|
|
|
+ margin-top: 13px;
|
|
|
+ display: flex;
|
|
|
+ > div {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 8px 15px;
|
|
|
+ height: 38px;
|
|
|
+ margin-right: 16px;
|
|
|
+ border-radius: 4px;
|
|
|
+ &.active {
|
|
|
+ background: #e7eeff;
|
|
|
+ > span {
|
|
|
+ color: #175dff;
|
|
|
+ }
|
|
|
+ .sort {
|
|
|
+ > div {
|
|
|
+ svg {
|
|
|
+ &.active {
|
|
|
+ color: #175dff;
|
|
|
+ }
|
|
|
}
|
|
|
- b{
|
|
|
- color: #929CA8;
|
|
|
- font-weight: 700;
|
|
|
- font-size: 16px;
|
|
|
- line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > span {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #2f3742;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ .sort {
|
|
|
+ cursor: pointer;
|
|
|
+ height: 20px;
|
|
|
+ > div {
|
|
|
+ font-size: 0;
|
|
|
+ svg {
|
|
|
+ width: 11px;
|
|
|
+ height: 11px;
|
|
|
+ color: #c2c2c2;
|
|
|
+ padding: 3px 2px 2px 2px;
|
|
|
+ &.icon-down {
|
|
|
+ height: 9px;
|
|
|
+ padding: 0 2px 2px 2px;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
- .main-inner{
|
|
|
- width: 1200px;
|
|
|
- margin: 0 auto;
|
|
|
- // border-radius: 8px;
|
|
|
- padding: 34px 40px;
|
|
|
- ul{
|
|
|
- list-style: none;
|
|
|
- display: flex;
|
|
|
- flex-flow: wrap;
|
|
|
- padding: 0;
|
|
|
- margin: 0;
|
|
|
- li{
|
|
|
- padding: 8px 15px;
|
|
|
- cursor: pointer;
|
|
|
- margin: 6px 16px 6px 0;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 16px;
|
|
|
- line-height: 22px;
|
|
|
- color: #2F3742;
|
|
|
- &.active{
|
|
|
- background: #E7EEFF;
|
|
|
- border-radius: 4px;
|
|
|
- color: #175DFF;
|
|
|
- }
|
|
|
- }
|
|
|
+ }
|
|
|
+ .timeconsume {
|
|
|
+ margin: 21px 0 0;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: rgba(0, 0, 0, 0.4);
|
|
|
+ }
|
|
|
+ .search-item {
|
|
|
+ margin: 24px 0 50px 0;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ cursor: pointer;
|
|
|
+ .el-image {
|
|
|
+ width: 110px;
|
|
|
+ height: 110px;
|
|
|
+ margin-right: 24px;
|
|
|
+ }
|
|
|
+ .search-inner {
|
|
|
+ flex: 1;
|
|
|
+ .top {
|
|
|
+ display: flex;
|
|
|
+ h2 {
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #2f3742;
|
|
|
+ margin: 0 16px 0 0;
|
|
|
+ font-family: "Rubik";
|
|
|
}
|
|
|
- .searchChangebox{
|
|
|
- margin-top: 13px;
|
|
|
- display: flex;
|
|
|
- > div {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 8px 15px;
|
|
|
- height: 38px;
|
|
|
- margin-right: 16px;
|
|
|
- border-radius: 4px;
|
|
|
- &.active{
|
|
|
- background: #E7EEFF;
|
|
|
- > span{
|
|
|
- color: #175DFF;
|
|
|
- }
|
|
|
- .sort {
|
|
|
- > div {
|
|
|
- svg{
|
|
|
- &.active{
|
|
|
- color: #175DFF;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- > span{
|
|
|
- font-weight: 400;
|
|
|
- font-size: 16px;
|
|
|
- line-height: 22px;
|
|
|
- color: #2F3742;
|
|
|
- margin-right: 8px;
|
|
|
- }
|
|
|
- .sort {
|
|
|
- cursor: pointer;
|
|
|
- height: 20px;
|
|
|
- > div {
|
|
|
- font-size: 0;
|
|
|
- svg {
|
|
|
- width: 11px;
|
|
|
- height: 11px;
|
|
|
- color: #C2C2C2;
|
|
|
- padding: 3px 2px 2px 2px;
|
|
|
- &.icon-down{
|
|
|
- height: 9px;
|
|
|
- padding: 0 2px 2px 2px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ span {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #929ca8;
|
|
|
}
|
|
|
- .timeconsume{
|
|
|
- margin: 21px 0 0;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 22px;
|
|
|
- color: rgba(0, 0, 0, 0.4);
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ margin: 8px 0;
|
|
|
+ word-break: break-word;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2; /* 超出几行省略 */
|
|
|
+ overflow: hidden;
|
|
|
+ color: #2f3742;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ height: 48px;
|
|
|
+ }
|
|
|
+ .bottom {
|
|
|
+ span {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #929ca8;
|
|
|
+ margin-right: 16px;
|
|
|
}
|
|
|
- .search-item{
|
|
|
- margin: 24px 0 50px 0;
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- cursor: pointer;
|
|
|
- .el-image{
|
|
|
- width: 110px;
|
|
|
- height: 110px;
|
|
|
- margin-right: 24px;
|
|
|
- }
|
|
|
- .search-inner{
|
|
|
- flex: 1;
|
|
|
- .top{
|
|
|
- display: flex;
|
|
|
- h2{
|
|
|
- font-weight: 700;
|
|
|
- font-size: 16px;
|
|
|
- line-height: 24px;
|
|
|
- color: #2F3742;
|
|
|
- margin: 0 16px 0 0;
|
|
|
- font-family: 'Rubik';
|
|
|
- }
|
|
|
- span{
|
|
|
- font-weight: 400;
|
|
|
- font-size: 16px;
|
|
|
- line-height: 24px;
|
|
|
- color: #929CA8;
|
|
|
- }
|
|
|
- }
|
|
|
- .content{
|
|
|
- margin: 8px 0;
|
|
|
- word-break: break-word;
|
|
|
- text-overflow: ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 2; /* 超出几行省略 */
|
|
|
- overflow: hidden;
|
|
|
- color: #2F3742;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 16px;
|
|
|
- line-height: 24px;
|
|
|
- height: 48px;
|
|
|
- }
|
|
|
- .bottom{
|
|
|
- span{
|
|
|
- font-weight: 400;
|
|
|
- font-size: 16px;
|
|
|
- line-height: 24px;
|
|
|
- color: #929CA8;
|
|
|
- margin-right: 16px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .search-list {
|
|
|
+ display: flex;
|
|
|
+ flex-flow: wrap;
|
|
|
+ width: 100%;
|
|
|
+ .search-items {
|
|
|
+ width: 200px;
|
|
|
+ margin: 24px 30px 24px 0;
|
|
|
+ flex-shrink: 0;
|
|
|
+ &.margin0 {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ .el-image {
|
|
|
+ width: 200px;
|
|
|
+ height: 280px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ .periodicalNumber {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #2f3742;
|
|
|
+ margin: 12px 12px 4px 12px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ .date {
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #929ca8;
|
|
|
+ margin: 0 12px 12px 12px;
|
|
|
+ }
|
|
|
+ .price {
|
|
|
+ margin: 0 12px;
|
|
|
+ align-items: flex-end;
|
|
|
+ display: flex;
|
|
|
+ :nth-child(1) {
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #ec5e41;
|
|
|
}
|
|
|
- .search-list{
|
|
|
- display: flex;
|
|
|
- flex-flow: wrap;
|
|
|
- width: 100%;
|
|
|
- .search-items{
|
|
|
- width: 200px;
|
|
|
- margin: 24px 30px 24px 0;
|
|
|
- flex-shrink: 0;
|
|
|
- &.margin0{
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
- .el-image{
|
|
|
- width: 200px;
|
|
|
- height: 280px;
|
|
|
- flex-shrink: 0;
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
- .periodicalNumber{
|
|
|
- font-weight: 400;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 22px;
|
|
|
- color: #2F3742;
|
|
|
- margin: 12px 12px 4px 12px;
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
- .date{
|
|
|
- font-size: 12px;
|
|
|
- line-height: 20px;
|
|
|
- color: #929CA8;
|
|
|
- margin: 0 12px 12px 12px;
|
|
|
- }
|
|
|
- .price {
|
|
|
- margin: 0 12px;
|
|
|
- align-items: flex-end;
|
|
|
- display: flex;
|
|
|
- :nth-child(1) {
|
|
|
- font-weight: 700;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 22px;
|
|
|
- color: #EC5E41;
|
|
|
- }
|
|
|
- :nth-child(2) {
|
|
|
- font-weight: 400;
|
|
|
- font-size: 12px;
|
|
|
- line-height: 20px;
|
|
|
- text-decoration-line: line-through;
|
|
|
- color: #929CA8;
|
|
|
- margin-left: 8px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ :nth-child(2) {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 20px;
|
|
|
+ text-decoration-line: line-through;
|
|
|
+ color: #929ca8;
|
|
|
+ margin-left: 8px;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="scss">
|
|
|
-.search-detail{
|
|
|
- .lightbg{
|
|
|
- background: #FFF500;
|
|
|
- }
|
|
|
+.search-detail {
|
|
|
+ .lightbg {
|
|
|
+ background: #fff500;
|
|
|
+ }
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
natasha