|
|
@@ -0,0 +1,381 @@
|
|
|
+<template>
|
|
|
+ <div class="bookShelf">
|
|
|
+ <Header
|
|
|
+ :headerBg="'#1F1F1F'"
|
|
|
+ :headerBorder="'#5C5C5C'"
|
|
|
+ :userBg="'rgba(0, 0, 0, 0.24)'"
|
|
|
+ :LoginNavIndex="4"
|
|
|
+ />
|
|
|
+ <ul class="option">
|
|
|
+ <li class="option-item" :class="[typeValue===indexo?'active':'']" v-for="(itemo,indexo) in optionList" :key="indexo" @click="handleClick(indexo)">
|
|
|
+ <span>{{itemo.label}}</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
+//例如：import 《组件名称》from ‘《组件路径》';
|
|
|
+import Header from "../../components/Header.vue";
|
|
|
+
|
|
|
+export default {
|
|
|
+ //import引入的组件需要注入到对象中才能使用
|
|
|
+ components: { Header },
|
|
|
+ props: {},
|
|
|
+ data() {
|
|
|
+ //这里存放数据
|
|
|
+ return {
|
|
|
+ optionList: [
|
|
|
+ {
|
|
|
+ label: '栏目 1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '栏目 2',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '栏目 3',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '栏目 4',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '栏目 5',
|
|
|
+ }
|
|
|
+ // ,
|
|
|
+ // {
|
|
|
+ // label: '合刊',
|
|
|
+ // img: 'hekan',
|
|
|
+ // number: '6'
|
|
|
+ // }
|
|
|
+ ],
|
|
|
+ typeValue: 0,
|
|
|
+ changeList: [
|
|
|
+ {
|
|
|
+ name: "按购买时间",
|
|
|
+ sort: "down",
|
|
|
+ sortName: "gmsj",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "按名称",
|
|
|
+ sort: "",
|
|
|
+ sortName: "fbsj",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "最近使用",
|
|
|
+ sort: "",
|
|
|
+ sortName: "zjsy",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ sortField: "gmsj",
|
|
|
+ searchNameValue: '', // 搜索名称值
|
|
|
+ loading: false,
|
|
|
+ noMore: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //计算属性 类似于data概念
|
|
|
+ computed: {
|
|
|
+ disabled () {
|
|
|
+ return this.loading || this.noMore
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //监控data中数据变化
|
|
|
+ watch: {},
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ handleClick(value){
|
|
|
+ this.typeValue = value
|
|
|
+ $(".list").animate({
|
|
|
+ scrollTop: 0
|
|
|
+ }, 200);
|
|
|
+ },
|
|
|
+ // 搜索查询
|
|
|
+ getSearch(){
|
|
|
+ $(".list").animate({
|
|
|
+ scrollTop: 0
|
|
|
+ }, 200);
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ 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;
|
|
|
+ } else {
|
|
|
+ item.sort = "";
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (sort == "down") {
|
|
|
+ this.sortType = 1;
|
|
|
+ } else {
|
|
|
+ this.sortType = 0;
|
|
|
+ }
|
|
|
+ this.sortField = sortName;
|
|
|
+ $(".list").animate({
|
|
|
+ scrollTop: 0
|
|
|
+ }, 200);
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ // 查询列表
|
|
|
+ getList(){
|
|
|
+ let arr = [{
|
|
|
+ src: require('../../assets/bookcard-image.png'),
|
|
|
+ name: "名称名称名称名称名称名称名称名称名称名称名称名称",
|
|
|
+ date: "2012-03-15",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ src: require('../../assets/bookcard-image.png'),
|
|
|
+ name: "练习册练习册",
|
|
|
+ typeName: '初三提高级'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ src: require('../../assets/bookcard-image.png'),
|
|
|
+ name: "课程课程",
|
|
|
+ classperiod: '45节'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ src: require('../../assets/bookcard-image.png'),
|
|
|
+ name: "名称名称名称名称名称名称名称名称名称名称名称名称",
|
|
|
+ date: "2012-03-15",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ src: require('../../assets/bookcard-image.png'),
|
|
|
+ name: "名称名称名称名称名称名称名称名称名称名称名称名称",
|
|
|
+ date: "2012-03-15",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ src: require('../../assets/bookcard-image.png'),
|
|
|
+ name: "名称名称名称名称名称名称名称名称名称名称名称名称",
|
|
|
+ date: "2012-03-15",
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ if(this.BookList.length<100){
|
|
|
+ this.BookList = this.BookList.concat(arr)
|
|
|
+ }else{
|
|
|
+ this.noMore = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ load () {
|
|
|
+ this.loading = true
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getList()
|
|
|
+ this.loading = false
|
|
|
+ }, 2000)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {
|
|
|
+
|
|
|
+ },
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {
|
|
|
+
|
|
|
+ },
|
|
|
+ //生命周期-创建之前
|
|
|
+ beforeCreated() { },
|
|
|
+ //生命周期-挂载之前
|
|
|
+ beforeMount() { },
|
|
|
+ //生命周期-更新之前
|
|
|
+ beforUpdate() { },
|
|
|
+ //生命周期-更新之后
|
|
|
+ updated() { },
|
|
|
+ //生命周期-销毁之前
|
|
|
+ beforeDestory() { },
|
|
|
+ //生命周期-销毁完成
|
|
|
+ destoryed() { },
|
|
|
+ //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+ activated() { }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+/* @import url(); 引入css类 */
|
|
|
+.bookShelf {
|
|
|
+ background: #F7F8FA;
|
|
|
+ height: calc(100vh - 64px);
|
|
|
+ .option{
|
|
|
+ list-style: none;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ background: #17171A;
|
|
|
+ li{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 30px;
|
|
|
+ height: 36px;
|
|
|
+ padding: 7px 20px;
|
|
|
+ margin: 8px 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover{
|
|
|
+ background: rgba(255, 255, 255, 0.08);
|
|
|
+ }
|
|
|
+ &.active{
|
|
|
+ background: rgba(255, 255, 255, 0.08);
|
|
|
+ .icon-img,span,b{
|
|
|
+ color: rgba(255, 255, 255, 0.9);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .icon-img{
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ margin: 1px 8px 0 0;
|
|
|
+ color: rgba(255, 255, 255, 0.5);
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ color: rgba(255, 255, 255, 0.5);
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ b{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: rgba(255, 255, 255, 0.5);
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .main {
|
|
|
+ width: 1200px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 24px 0 0 0;
|
|
|
+ .searchChangebox{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .searchChange-box{
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .searchChange {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 4px 12px;
|
|
|
+ height: 32px;
|
|
|
+ margin-right: 16px;
|
|
|
+ border: 1px solid #E5E6EB;
|
|
|
+ border-radius: 20px;
|
|
|
+ &.active{
|
|
|
+ background: #175DFF;
|
|
|
+ > span{
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ .sort {
|
|
|
+ > div {
|
|
|
+ svg{
|
|
|
+ color: #5E89EF;
|
|
|
+ &.active{
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > span{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #000;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .input-search{
|
|
|
+ width: 220px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .show-title{
|
|
|
+ color: #1F2C5C;
|
|
|
+ margin: 24px 0 0 0;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 24px;
|
|
|
+ line-height: 32px;
|
|
|
+ b{
|
|
|
+ margin-left: 16px;
|
|
|
+ color: #ED5F00;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list {
|
|
|
+ margin-top: 28px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ height: calc(100vh - 256px);
|
|
|
+ overflow-y: scroll;
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ > div {
|
|
|
+ width: 200px;
|
|
|
+ border-radius: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ background: #ffffff;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ }
|
|
|
+ .tips{
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #929CA8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.bookShelf{
|
|
|
+ .searchChangebox{
|
|
|
+ .input-search{
|
|
|
+ .el-input__inner{
|
|
|
+ height: 32px;
|
|
|
+ color: #1D2129;
|
|
|
+ background: #F2F3F5;
|
|
|
+ border: none;
|
|
|
+ line-height: 32px;
|
|
|
+ }
|
|
|
+ .el-input-group__append{
|
|
|
+ border: none;
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ background: #165DFF;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover{
|
|
|
+ background: #4080FF;
|
|
|
+ }
|
|
|
+ &:focus{
|
|
|
+ background: #0E42D2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-button{
|
|
|
+ padding: 0;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
natasha