|
@@ -7,7 +7,7 @@
|
|
|
<div class="jy-header">
|
|
|
<p>在线学习</p>
|
|
|
<div class="search">
|
|
|
- <input v-model="searMsg" type="text" placeholder="搜索关键字" />
|
|
|
+ <input v-model="keyword" type="text" placeholder="搜索关键字" />
|
|
|
<span class="inp-sear"></span>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -15,273 +15,61 @@
|
|
|
<div class="nav">
|
|
|
<div>
|
|
|
<span>年级</span>
|
|
|
- <el-tabs v-model="njActiveName" @tab-click="handleClick">
|
|
|
- <el-tab-pane label="全部" name="a"></el-tab-pane>
|
|
|
- <el-tab-pane label="幼儿园" name="b"></el-tab-pane>
|
|
|
- <el-tab-pane label="一年级" name="c"></el-tab-pane>
|
|
|
- <el-tab-pane label="二年级" name="d"></el-tab-pane>
|
|
|
- <el-tab-pane label="三年级" name="e"></el-tab-pane>
|
|
|
- <el-tab-pane label="四年级" name="f"></el-tab-pane>
|
|
|
- <el-tab-pane label="五年级" name="g"></el-tab-pane>
|
|
|
- <el-tab-pane label="六年级" name="h"></el-tab-pane>
|
|
|
- <el-tab-pane label="初一" name="i"></el-tab-pane>
|
|
|
- <el-tab-pane label="初二" name="j"></el-tab-pane>
|
|
|
- <el-tab-pane label="初三" name="k"></el-tab-pane>
|
|
|
- <el-tab-pane label="高一" name="l"></el-tab-pane>
|
|
|
- <el-tab-pane label="高二" name="m"></el-tab-pane>
|
|
|
- <el-tab-pane label="高三" name="n"></el-tab-pane>
|
|
|
- <el-tab-pane label="其他" name="o"></el-tab-pane>
|
|
|
+ <el-tabs v-model="njActiveName">
|
|
|
+ <el-tab-pane
|
|
|
+ v-for="(item, index) in gradeList"
|
|
|
+ :key="index"
|
|
|
+ :label="item.grade_name"
|
|
|
+ :value="item.grade_id"
|
|
|
+ ></el-tab-pane>
|
|
|
</el-tabs>
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
<span>科目</span>
|
|
|
- <el-tabs v-model="kmActiveName" @tab-click="handleClick">
|
|
|
- <el-tab-pane label="全部" name="a"></el-tab-pane>
|
|
|
- <el-tab-pane label="音乐" name="b"></el-tab-pane>
|
|
|
- <el-tab-pane label="美术" name="c"></el-tab-pane>
|
|
|
- <el-tab-pane label="舞蹈" name="d"></el-tab-pane>
|
|
|
- <el-tab-pane label="摄影" name="e"></el-tab-pane>
|
|
|
- <el-tab-pane label="毛笔" name="f"></el-tab-pane>
|
|
|
+ <el-tabs v-model="kmActiveName">
|
|
|
+ <el-tab-pane
|
|
|
+ v-for="(item, index) in subjectList"
|
|
|
+ :key="index"
|
|
|
+ :label="item.subject_name"
|
|
|
+ :value="item.subject_id"
|
|
|
+ ></el-tab-pane>
|
|
|
</el-tabs>
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
<span>分类</span>
|
|
|
- <el-tabs v-model="flActiveName" @tab-click="handleClick">
|
|
|
- <el-tab-pane label="全部" name="a"></el-tab-pane>
|
|
|
- <el-tab-pane label="word" name="b"></el-tab-pane>
|
|
|
- <el-tab-pane label="ppt" name="c"></el-tab-pane>
|
|
|
- <el-tab-pane label="pdf" name="d"></el-tab-pane>
|
|
|
- <el-tab-pane label="excel" name="e"></el-tab-pane>
|
|
|
- <el-tab-pane label="视频" name="f"></el-tab-pane>
|
|
|
+ <el-tabs
|
|
|
+ v-for="(item, index) in listData"
|
|
|
+ :key="index"
|
|
|
+ v-model="item.zz_type"
|
|
|
+ >
|
|
|
+ <el-tab-pane></el-tab-pane>
|
|
|
</el-tabs>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="ysgc-kind" v-for="(item,index) in " :key="index">
|
|
|
+ <div class="ysgc-kind">
|
|
|
<ul class="specail">
|
|
|
- <li class="kc" @click="zxxxspDetail">
|
|
|
- <div class="mask"></div>
|
|
|
- <img class="kc-back" src="@/assets/img/zhjyzxxx/img_5.png" alt="" />
|
|
|
+ <li class="kc" v-for="(item, index) in listData" :key="index">
|
|
|
+ <!-- <div class="mask" @click="zxxxspDetail"></div> -->
|
|
|
+ <img
|
|
|
+ @click="zxxxxqDetail(item.zz_id)"
|
|
|
+ class="kc-back"
|
|
|
+ :src="https + item.zz_img"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
<div class="kc-des">
|
|
|
- <p class="kc-name">安徒生世界插画</p>
|
|
|
+ <p class="kc-name">{{ item.zz_name }}</p>
|
|
|
<div class="rate">
|
|
|
- <img
|
|
|
- v-for="star in 5"
|
|
|
- :key="star"
|
|
|
- src="@/assets/img/zhjyzxxx/star.png"
|
|
|
- alt=""
|
|
|
- />
|
|
|
+ <el-rate v-model="item.zz_star_num"></el-rate>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="zan">
|
|
|
- <img src="@/assets/img/zhjyzxxx/zan.png" /> 10w+
|
|
|
- <img src="@/assets/img/zhjyzxxx/xin.png" alt="" />14w+
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <li class="kc" @click="zxxxxqDetail">
|
|
|
- <img class="kc-back" src="@/assets/img/zhjyzxxx/img_3.png" alt="" />
|
|
|
- <div class="kc-des">
|
|
|
- <p class="kc-name">野天鹅</p>
|
|
|
- <div class="rate">
|
|
|
- <img
|
|
|
- v-for="star in 5"
|
|
|
- :key="star"
|
|
|
- src="@/assets/img/zhjyzxxx/star.png"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="zan">
|
|
|
- <img src="@/assets/img/zhjyzxxx/zan.png" /> 10w+
|
|
|
- <img src="@/assets/img/zhjyzxxx/xin.png" alt="" />14w+
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <li class="kc" @click="zxxxxqDetail">
|
|
|
- <img class="kc-back" src="@/assets/img/zhjyzxxx/img_1.png" alt="" />
|
|
|
- <div class="kc-des">
|
|
|
- <p class="kc-name">传送门</p>
|
|
|
- <div class="rate">
|
|
|
- <img
|
|
|
- v-for="star in 5"
|
|
|
- :key="star"
|
|
|
- src="@/assets/img/zhjyzxxx/star.png"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="zan">
|
|
|
- <img src="@/assets/img/zhjyzxxx/zan.png" /> 10w+
|
|
|
- <img src="@/assets/img/zhjyzxxx/xin.png" alt="" />14w+
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <li class="kc" @click="zxxxxqDetail">
|
|
|
- <img class="kc-back" src="@/assets/img/zhjyzxxx/img_4.png" alt="" />
|
|
|
- <div class="kc-des">
|
|
|
- <p class="kc-name">拇指姑娘</p>
|
|
|
- <div class="rate">
|
|
|
- <img
|
|
|
- v-for="star in 5"
|
|
|
- :key="star"
|
|
|
- src="@/assets/img/zhjyzxxx/star.png"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="zan">
|
|
|
- <img src="@/assets/img/zhjyzxxx/zan.png" /> 10w+
|
|
|
- <img src="@/assets/img/zhjyzxxx/xin.png" alt="" />14w+
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <ul class="specail">
|
|
|
- <li class="kc" @click="zxxxxqDetail">
|
|
|
- <img class="kc-back" src="@/assets/img/zhjyzxxx/img_5.png" alt="" />
|
|
|
- <div class="kc-des">
|
|
|
- <p class="kc-name">安徒生世界插画</p>
|
|
|
- <div class="rate">
|
|
|
- <img
|
|
|
- v-for="star in 5"
|
|
|
- :key="star"
|
|
|
- src="@/assets/img/zhjyzxxx/star.png"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="zan">
|
|
|
- <img src="@/assets/img/zhjyzxxx/zan.png" /> 10w+
|
|
|
- <img src="@/assets/img/zhjyzxxx/xin.png" alt="" />14w+
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <li class="kc" @click="zxxxspDetail">
|
|
|
- <div class="mask"></div>
|
|
|
- <img class="kc-back" src="@/assets/img/zhjyzxxx/img_3.png" alt="" />
|
|
|
- <div class="kc-des">
|
|
|
- <p class="kc-name">野天鹅</p>
|
|
|
- <div class="rate">
|
|
|
- <img
|
|
|
- v-for="star in 5"
|
|
|
- :key="star"
|
|
|
- src="@/assets/img/zhjyzxxx/star.png"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="zan">
|
|
|
- <img src="@/assets/img/zhjyzxxx/zan.png" /> 10w+
|
|
|
- <img src="@/assets/img/zhjyzxxx/xin.png" alt="" />14w+
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <li class="kc" @click="zxxxspDetail">
|
|
|
- <div class="mask"></div>
|
|
|
- <img class="kc-back" src="@/assets/img/zhjyzxxx/img_1.png" alt="" />
|
|
|
- <div class="kc-des">
|
|
|
- <p class="kc-name">传送门</p>
|
|
|
- <div class="rate">
|
|
|
- <img
|
|
|
- v-for="star in 5"
|
|
|
- :key="star"
|
|
|
- src="@/assets/img/zhjyzxxx/star.png"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="zan">
|
|
|
- <img src="@/assets/img/zhjyzxxx/zan.png" /> 10w+
|
|
|
- <img src="@/assets/img/zhjyzxxx/xin.png" alt="" />14w+
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <li class="kc" @click="zxxxxqDetail">
|
|
|
- <img class="kc-back" src="@/assets/img/zhjyzxxx/img_4.png" alt="" />
|
|
|
- <div class="kc-des">
|
|
|
- <p class="kc-name">拇指姑娘</p>
|
|
|
- <div class="rate">
|
|
|
- <img
|
|
|
- v-for="star in 5"
|
|
|
- :key="star"
|
|
|
- src="@/assets/img/zhjyzxxx/star.png"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="zan">
|
|
|
- <img src="@/assets/img/zhjyzxxx/zan.png" /> 10w+
|
|
|
- <img src="@/assets/img/zhjyzxxx/xin.png" alt="" />14w+
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <ul class="specail">
|
|
|
- <li class="kc" @click="zxxxxqDetail">
|
|
|
- <img class="kc-back" src="@/assets/img/zhjyzxxx/img_5.png" alt="" />
|
|
|
- <div class="kc-des">
|
|
|
- <p class="kc-name">安徒生世界插画</p>
|
|
|
- <div class="rate">
|
|
|
- <img
|
|
|
- v-for="star in 5"
|
|
|
- :key="star"
|
|
|
- src="@/assets/img/zhjyzxxx/star.png"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="zan">
|
|
|
- <img src="@/assets/img/zhjyzxxx/zan.png" /> 10w+
|
|
|
- <img src="@/assets/img/zhjyzxxx/xin.png" alt="" />14w+
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <li class="kc" @click="zxxxxqDetail">
|
|
|
- <img class="kc-back" src="@/assets/img/zhjyzxxx/img_3.png" alt="" />
|
|
|
- <div class="kc-des">
|
|
|
- <p class="kc-name">野天鹅</p>
|
|
|
- <div class="rate">
|
|
|
- <img
|
|
|
- v-for="star in 5"
|
|
|
- :key="star"
|
|
|
- src="@/assets/img/zhjyzxxx/star.png"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="zan">
|
|
|
- <img src="@/assets/img/zhjyzxxx/zan.png" /> 10w+
|
|
|
- <img src="@/assets/img/zhjyzxxx/xin.png" alt="" />14w+
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <li class="kc" @click="zxxxxqDetail">
|
|
|
- <img class="kc-back" src="@/assets/img/zhjyzxxx/img_1.png" alt="" />
|
|
|
- <div class="kc-des">
|
|
|
- <p class="kc-name">传送门</p>
|
|
|
- <div class="rate">
|
|
|
- <img
|
|
|
- v-for="star in 5"
|
|
|
- :key="star"
|
|
|
- src="@/assets/img/zhjyzxxx/star.png"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="zan">
|
|
|
- <img src="@/assets/img/zhjyzxxx/zan.png" /> 10w+
|
|
|
- <img src="@/assets/img/zhjyzxxx/xin.png" alt="" />14w+
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <li class="kc" @click="zxxxxqDetail">
|
|
|
- <img class="kc-back" src="@/assets/img/zhjyzxxx/img_4.png" alt="" />
|
|
|
- <div class="kc-des">
|
|
|
- <p class="kc-name">拇指姑娘</p>
|
|
|
- <div class="rate">
|
|
|
- <img
|
|
|
- v-for="star in 5"
|
|
|
- :key="star"
|
|
|
- src="@/assets/img/zhjyzxxx/star.png"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="zan">
|
|
|
- <img src="@/assets/img/zhjyzxxx/zan.png" /> 10w+
|
|
|
- <img src="@/assets/img/zhjyzxxx/xin.png" alt="" />14w+
|
|
|
+ <img src="@/assets/img/zhjyzxxx/zan.png" /> {{ item.zz_like_num }}
|
|
|
+ <img src="@/assets/img/zhjyzxxx/xin.png" alt="" />{{
|
|
|
+ item.zz_fav_num
|
|
|
+ }}
|
|
|
</div>
|
|
|
</li>
|
|
|
</ul>
|
|
@@ -293,9 +81,11 @@
|
|
|
>
|
|
|
<el-pagination
|
|
|
background
|
|
|
- layout="prev, pager, next"
|
|
|
- :total="1000"
|
|
|
+ layout="total,prev, pager, next"
|
|
|
+ :total="total"
|
|
|
style="position: absolute; top: 0; right: 0"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :page-size="limit"
|
|
|
>
|
|
|
</el-pagination>
|
|
|
</div>
|
|
@@ -304,7 +94,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { zxxx_list } from "./api";
|
|
|
+import { zxxx_list, grade_list, subject_list } from "./api";
|
|
|
import commonHeader from "@/components/header/index.vue";
|
|
|
export default {
|
|
|
name: "index",
|
|
@@ -316,29 +106,85 @@ export default {
|
|
|
kmActiveName: "b",
|
|
|
njActiveName: "b",
|
|
|
flActiveName: "b",
|
|
|
- getDetail: {},
|
|
|
+ listData: [],
|
|
|
+ keyword: "",
|
|
|
+ limit: 10,
|
|
|
+ total: 0,
|
|
|
+ cur_page: 1,
|
|
|
+ https: window.GLOBAL_CONFIG.api,
|
|
|
+ gradeList: [],
|
|
|
+ subjectList: [],
|
|
|
+
|
|
|
+ grade_id: "",
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
- zxxxxqDetail() {
|
|
|
- this.$router.push({ name: "zhjy_zhjyzxxx_zxxxxq" });
|
|
|
+ //跳转
|
|
|
+ zxxxxqDetail(id) {
|
|
|
+ this.$router.push({ name: "zhjy_zhjyzxxx_zxxxxq", params: { id: id } });
|
|
|
},
|
|
|
zxxxspDetail() {
|
|
|
this.$router.push({ name: "zhjy_zhjyzxxx_zxxxsp" });
|
|
|
},
|
|
|
+ //数据获取
|
|
|
getData() {
|
|
|
let data = {
|
|
|
- page: this.page,
|
|
|
+ page: this.cur_page,
|
|
|
limit: this.limit,
|
|
|
keyword: this.keyword,
|
|
|
};
|
|
|
+
|
|
|
zxxx_list(data).then((res) => {
|
|
|
- this.image.png = res.data;
|
|
|
+ this.listData = res.data.page_data;
|
|
|
+ console.log(this.listData);
|
|
|
+ this.cur_page = Number(res.data.page_now);
|
|
|
+ this.total = Number(res.data.total_rows);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.cur_page = val;
|
|
|
+ this.listData();
|
|
|
+ },
|
|
|
+
|
|
|
+ //年级列表
|
|
|
+ gradeListData() {
|
|
|
+ let data = {
|
|
|
+ page: 1,
|
|
|
+ limit: 9999,
|
|
|
+ };
|
|
|
+ grade_list(data).then((res) => {
|
|
|
+ if (res.code == 1) {
|
|
|
+ this.gradeList = res.data.page_data;
|
|
|
+ let obj = {
|
|
|
+ grade_id: "",
|
|
|
+ grade_name: "全部",
|
|
|
+ };
|
|
|
+ this.gradeList.unshift(obj);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //科目列表
|
|
|
+ subjectListData() {
|
|
|
+ let data = {
|
|
|
+ page: 1,
|
|
|
+ limit: 9999,
|
|
|
+ };
|
|
|
+ subject_list(data).then((res) => {
|
|
|
+ if (res.code == 1) {
|
|
|
+ this.subjectList = res.data.page_data;
|
|
|
+ let obj = {
|
|
|
+ subject_id: "",
|
|
|
+ subject_name: "全部",
|
|
|
+ };
|
|
|
+ this.subjectList.unshift(obj);
|
|
|
+ }
|
|
|
});
|
|
|
},
|
|
|
},
|
|
|
mounted() {
|
|
|
this.getData();
|
|
|
+ this.gradeListData();
|
|
|
+ this.subjectListData();
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
@@ -456,11 +302,14 @@ export default {
|
|
|
// width: 1650px;
|
|
|
width: 1280px;
|
|
|
margin: 0 auto;
|
|
|
+
|
|
|
.specail {
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
+
|
|
|
li {
|
|
|
+ display: inline-block;
|
|
|
margin: 0 13px 17px 0;
|
|
|
overflow: hidden;
|
|
|
box-shadow: 0px 10px 24px 0px rgba(161, 153, 168, 0.18);
|
|
@@ -562,7 +411,7 @@ export default {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
right: 0;
|
|
|
- width: 173px;
|
|
|
+ width: 150px;
|
|
|
height: 34px;
|
|
|
line-height: 34px;
|
|
|
font-size: 14px;
|