|
|
@@ -1,412 +1,409 @@
|
|
|
<template>
|
|
|
- <common-header/>
|
|
|
- <div class="content">
|
|
|
- <div class="title">
|
|
|
- 协同备课 <span>智慧教研-</span><span>协同备课</span>
|
|
|
- </div>
|
|
|
- <div class="jy-header">
|
|
|
- <p>协同备课</p>
|
|
|
- <div class="search">
|
|
|
- <input v-model="keyword" type="text" placeholder="搜索关键字"/>
|
|
|
- <span class="inp-sear" @click="getData"></span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <common-header />
|
|
|
+ <div class="content">
|
|
|
+ <div class="title">
|
|
|
+ 协同备课 <span>智慧教研-</span><span>协同备课</span>
|
|
|
+ </div>
|
|
|
+ <div class="jy-header">
|
|
|
+ <p>协同备课</p>
|
|
|
+ <div class="search">
|
|
|
+ <input v-model="keyword" type="text" placeholder="搜索关键字" />
|
|
|
+ <span class="inp-sear" @click="getData"></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="nav">
|
|
|
- <div>
|
|
|
- <span>年级</span>
|
|
|
- <el-tabs v-model="firstForm.grade" @click="getData">
|
|
|
- <el-tab-pane v-for="(item, index) in gradeList" :key="index" :label="item.grade_name"
|
|
|
- :name="item.grade_id"></el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div>
|
|
|
- <span>科目</span>
|
|
|
- <el-tabs v-model="firstForm.subject" @click="getData">
|
|
|
- <el-tab-pane v-for="(item, index) in subjectList" :key="index" :label="item.subject_name"
|
|
|
- :name="item.subject_id"></el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="nav">
|
|
|
+ <div>
|
|
|
+ <span>年级</span>
|
|
|
+ <el-tabs v-model="firstForm.grade" @click="getData">
|
|
|
+ <el-tab-pane v-for="(item, index) in gradeList" :key="index" :label="item.grade_name" :name="item.grade_id"></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <span>科目</span>
|
|
|
+ <el-tabs v-model="firstForm.subject" @click="getData">
|
|
|
+ <el-tab-pane v-for="(item, index) in subjectList" :key="index" :label="item.subject_name" :name="item.subject_id"></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="list-right">
|
|
|
- <div class="list" v-for="(item, index) in listData" :key="index">
|
|
|
- <div class="img-show"><img :src="https + item.zx_img" alt=""/></div>
|
|
|
- <div class="main">
|
|
|
- <p class="main-title">{{ item.zx_name }}</p>
|
|
|
- <p class="main-content">{{ item.zx_brief }}</p>
|
|
|
- <div>
|
|
|
- <img src="@/assets/img/zhjy/img_11.png" alt=""/>{{
|
|
|
+ <div class="list-right">
|
|
|
+ <div class="list" v-for="(item, index) in listData" :key="index">
|
|
|
+ <div class="img-show"><img :src="https + item.zx_img" alt="" /></div>
|
|
|
+ <div class="main">
|
|
|
+ <p class="main-title">{{ item.zx_name }}</p>
|
|
|
+ <p class="main-content">{{ item.zx_brief }}</p>
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/img/zhjy/img_11.png" alt="" />{{
|
|
|
item.zx_zrjs
|
|
|
}}<span @click="xtbknrDetail(item.zx_id)">查看</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="footer">
|
|
|
- <div style="
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="footer">
|
|
|
+ <div style="
|
|
|
width: 1400px;
|
|
|
height: 50px;
|
|
|
|
|
|
position: relative;
|
|
|
margin: 0 auto;
|
|
|
">
|
|
|
- <el-pagination background layout="total,prev, pager, next" :total="total"
|
|
|
- style="position: absolute; top: 0; right: 0" @current-change="handleCurrentChange"
|
|
|
- :page-size="limit">
|
|
|
- </el-pagination>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <el-pagination background layout="total,prev, pager, next" :total="total" style="position: absolute; top: 0; right: 0" @current-change="handleCurrentChange" :page-size="limit">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import {xtbk_list, grade_list, subject_list, user_avatar} from "./api";
|
|
|
+import { xtbk_list, grade_list, subject_list, user_avatar } from "./api";
|
|
|
import CommonHeader from "@/components/CommonHeader/index.vue";
|
|
|
|
|
|
export default {
|
|
|
- name: "index",
|
|
|
- components: {
|
|
|
- CommonHeader,
|
|
|
+ name: "index",
|
|
|
+ components: {
|
|
|
+ CommonHeader,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ listData: [],
|
|
|
+ keyword: "",
|
|
|
+ limit: 10,
|
|
|
+ total: 0,
|
|
|
+ cur_page: 1,
|
|
|
+ https: window.GLOBAL_CONFIG.api,
|
|
|
+ gradeList: [],
|
|
|
+ subjectList: [],
|
|
|
+ grade_id: "",
|
|
|
+ subject_id: "",
|
|
|
+ firstForm: {
|
|
|
+ grade: "",
|
|
|
+ subject: "",
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ xtbknrDetail(id) {
|
|
|
+ this.$router.push({ name: "zhjy_zhjyxtbk_nrxq", params: { id: id } });
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- listData: [],
|
|
|
- keyword: "",
|
|
|
- limit: 10,
|
|
|
- total: 0,
|
|
|
- cur_page: 1,
|
|
|
- https: window.GLOBAL_CONFIG.api,
|
|
|
- gradeList: [],
|
|
|
- subjectList: [],
|
|
|
+
|
|
|
+ //数据获取
|
|
|
+ getData() {
|
|
|
+ let data = {
|
|
|
+ page: this.cur_page,
|
|
|
+ limit: this.limit,
|
|
|
+ keyword: this.keyword,
|
|
|
+ grade_id: this.firstForm.grade,
|
|
|
+ subject_id: this.firstForm.subject,
|
|
|
+ };
|
|
|
+ console.log("data", data);
|
|
|
+ xtbk_list(data).then((res) => {
|
|
|
+ console.log("data1", 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: "",
|
|
|
- subject_id: "",
|
|
|
- firstForm: {
|
|
|
- grade: "",
|
|
|
- subject: "",
|
|
|
- },
|
|
|
- };
|
|
|
+ grade_name: "全部",
|
|
|
+ };
|
|
|
+ this.gradeList.unshift(obj);
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
- methods: {
|
|
|
- xtbknrDetail(id) {
|
|
|
- this.$router.push({name: "zhjy_zhjyxtbk_nrxq", params: {id: id}});
|
|
|
- },
|
|
|
-
|
|
|
- //数据获取
|
|
|
- getData() {
|
|
|
- let data = {
|
|
|
- page: this.cur_page,
|
|
|
- limit: this.limit,
|
|
|
- keyword: this.keyword,
|
|
|
- grade_id: this.firstForm.grade,
|
|
|
- subject_id: this.firstForm.subject,
|
|
|
- };
|
|
|
- console.log("data", data);
|
|
|
- xtbk_list(data).then((res) => {
|
|
|
- console.log("data1", 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);
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- //头像数据
|
|
|
- AvatarData() {
|
|
|
- let data = {user_id: this.user_id};
|
|
|
- user_avatar(data).then((res) => {
|
|
|
- if (res.code == 1) {
|
|
|
- this.avatarList = res.data;
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
+ //科目列表
|
|
|
+ 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();
|
|
|
- this.AvatarData();
|
|
|
+ //头像数据
|
|
|
+ AvatarData() {
|
|
|
+ let data = { user_id: this.user_id };
|
|
|
+ user_avatar(data).then((res) => {
|
|
|
+ if (res.code == 1) {
|
|
|
+ this.avatarList = res.data;
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getData();
|
|
|
+ this.gradeListData();
|
|
|
+ this.subjectListData();
|
|
|
+ this.AvatarData();
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.content {
|
|
|
- width: 100%;
|
|
|
- min-width: 1400px;
|
|
|
- margin: 0 auto;
|
|
|
+ width: 100%;
|
|
|
+ min-width: 1400px;
|
|
|
+ margin: 0 auto;
|
|
|
}
|
|
|
|
|
|
.title {
|
|
|
- width: 1400px;
|
|
|
-
|
|
|
- height: 55px;
|
|
|
- line-height: 55px;
|
|
|
- font-size: 18px;
|
|
|
+ width: 1400px;
|
|
|
+
|
|
|
+ height: 55px;
|
|
|
+ line-height: 55px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-family: PingFangSC, PingFangSC-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #050026;
|
|
|
+ margin: 0 auto;
|
|
|
+
|
|
|
+ span:first-of-type {
|
|
|
+ width: 56px;
|
|
|
+ height: 20px;
|
|
|
+ font-size: 14px;
|
|
|
font-family: PingFangSC, PingFangSC-Regular;
|
|
|
font-weight: 400;
|
|
|
- color: #050026;
|
|
|
- margin: 0 auto;
|
|
|
-
|
|
|
- span:first-of-type {
|
|
|
- width: 56px;
|
|
|
- height: 20px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: PingFangSC, PingFangSC-Regular;
|
|
|
- font-weight: 400;
|
|
|
- text-align: left;
|
|
|
- color: #949494;
|
|
|
- line-height: 20px;
|
|
|
- margin-left: 30px;
|
|
|
- }
|
|
|
-
|
|
|
- span:last-of-type {
|
|
|
- width: 56px;
|
|
|
- height: 20px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: PingFangSC, PingFangSC-Regular;
|
|
|
- font-weight: 400;
|
|
|
- text-align: left;
|
|
|
- color: #000000;
|
|
|
- line-height: 20px;
|
|
|
- }
|
|
|
+ text-align: left;
|
|
|
+ color: #949494;
|
|
|
+ line-height: 20px;
|
|
|
+ margin-left: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ span:last-of-type {
|
|
|
+ width: 56px;
|
|
|
+ height: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC, PingFangSC-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: left;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.jy-header {
|
|
|
- width: 100%;
|
|
|
- height: 200px;
|
|
|
- background: url("@/assets/img/zhjyzxxx/xtbk_bg.png");
|
|
|
- background-size: 100% 200px;
|
|
|
- background-repeat: no-repeat;
|
|
|
- padding-top: 40px;
|
|
|
-
|
|
|
- p {
|
|
|
- width: 192px;
|
|
|
- height: 67px;
|
|
|
- font-size: 48px;
|
|
|
- font-family: PingFangSC, PingFangSC-Semibold;
|
|
|
- font-weight: 600;
|
|
|
- text-align: left;
|
|
|
- color: #ffffff;
|
|
|
- line-height: 67px;
|
|
|
- margin: 0 auto;
|
|
|
- margin-bottom: 15px;
|
|
|
- }
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ background: url("@/assets/img/zhjyzxxx/xtbk_bg.png");
|
|
|
+ background-size: 100% 200px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ padding-top: 40px;
|
|
|
+
|
|
|
+ p {
|
|
|
+ width: 192px;
|
|
|
+ height: 67px;
|
|
|
+ font-size: 48px;
|
|
|
+ font-family: PingFangSC, PingFangSC-Semibold;
|
|
|
+ font-weight: 600;
|
|
|
+ text-align: left;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 67px;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
|
|
|
- .search {
|
|
|
- position: relative;
|
|
|
- height: 50px;
|
|
|
- width: 497px;
|
|
|
- margin: 0 auto;
|
|
|
-
|
|
|
- input {
|
|
|
- background: #ffffff;
|
|
|
- border-radius: 8px;
|
|
|
- border: 1px solid #00a3ff;
|
|
|
- height: 50px;
|
|
|
- padding: 20px;
|
|
|
- width: 100%;
|
|
|
- outline: none;
|
|
|
- }
|
|
|
+ .search {
|
|
|
+ position: relative;
|
|
|
+ height: 50px;
|
|
|
+ width: 497px;
|
|
|
+ margin: 0 auto;
|
|
|
|
|
|
- .inp-sear {
|
|
|
- display: block;
|
|
|
- width: 26px;
|
|
|
- height: 26px;
|
|
|
- background-color: #00a3ff;
|
|
|
- border-radius: 6px;
|
|
|
- position: absolute;
|
|
|
- top: 11px;
|
|
|
- right: 10px;
|
|
|
- background-image: url("@/assets/img/zhjyzxxx/search.png");
|
|
|
- background-size: 60%;
|
|
|
- background-position: center;
|
|
|
- background-repeat: no-repeat;
|
|
|
- }
|
|
|
+ input {
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px solid #00a3ff;
|
|
|
+ height: 50px;
|
|
|
+ padding: 20px;
|
|
|
+ width: 100%;
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .inp-sear {
|
|
|
+ display: block;
|
|
|
+ width: 26px;
|
|
|
+ height: 26px;
|
|
|
+ background-color: #00a3ff;
|
|
|
+ border-radius: 6px;
|
|
|
+ position: absolute;
|
|
|
+ top: 11px;
|
|
|
+ right: 10px;
|
|
|
+ background-image: url("@/assets/img/zhjyzxxx/search.png");
|
|
|
+ background-size: 60%;
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.nav {
|
|
|
- width: 1400px;
|
|
|
- margin: 0 auto;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- margin-bottom: 20px;
|
|
|
+ width: 1400px;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-bottom: 20px;
|
|
|
|
|
|
- div {
|
|
|
- display: flex;
|
|
|
+ div {
|
|
|
+ display: flex;
|
|
|
|
|
|
- span {
|
|
|
- padding-top: 10px;
|
|
|
- display: inline-block;
|
|
|
- width: 50px;
|
|
|
- height: 50px;
|
|
|
- font-size: 16px;
|
|
|
- font-family: PingFangSC, PingFangSC-Semibold;
|
|
|
- font-weight: 600;
|
|
|
- text-align: center;
|
|
|
- color: #000000;
|
|
|
- line-height: 21px;
|
|
|
- }
|
|
|
+ span {
|
|
|
+ padding-top: 10px;
|
|
|
+ display: inline-block;
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: PingFangSC, PingFangSC-Semibold;
|
|
|
+ font-weight: 600;
|
|
|
+ text-align: center;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 21px;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.list-right {
|
|
|
- width: 1400px;
|
|
|
+ width: 1400px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin: 0 auto;
|
|
|
+
|
|
|
+ .list {
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 630px;
|
|
|
+ height: 150px;
|
|
|
display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- margin: 0 auto;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ box-shadow: 0px 15px 24px 0px rgba(161, 153, 168, 0.18);
|
|
|
+
|
|
|
+ &:nth-of-type(odd) {
|
|
|
+ margin-right: 50px;
|
|
|
+ }
|
|
|
|
|
|
- .list {
|
|
|
- box-sizing: border-box;
|
|
|
- width: 630px;
|
|
|
- height: 150px;
|
|
|
- display: flex;
|
|
|
- margin-bottom: 20px;
|
|
|
- box-shadow: 0px 15px 24px 0px rgba(161, 153, 168, 0.18);
|
|
|
+ .img-show {
|
|
|
+ width: 283px;
|
|
|
+ height: 150px;
|
|
|
+ border-radius: 12px 0px 0px 12px;
|
|
|
+ overflow: hidden;
|
|
|
|
|
|
- &:nth-of-type(odd) {
|
|
|
- margin-right: 50px;
|
|
|
- }
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .img-show {
|
|
|
- width: 283px;
|
|
|
- height: 150px;
|
|
|
- border-radius: 12px 0px 0px 12px;
|
|
|
- overflow: hidden;
|
|
|
+ .main {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding-left: 12px;
|
|
|
+ position: relative;
|
|
|
+ width: 380px;
|
|
|
+ height: 150px;
|
|
|
+
|
|
|
+ .main-title {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: top;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: PingFangSC, PingFangSC-Medium;
|
|
|
+ font-weight: 500;
|
|
|
+ text-align: left;
|
|
|
+ color: #050026;
|
|
|
+ line-height: 22px;
|
|
|
+ word-wrap: break-word;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .main-content {
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ height: 35px;
|
|
|
+ word-wrap: break-word;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ overflow: hidden;
|
|
|
+ color: #949494;
|
|
|
+ line-height: 17px;
|
|
|
+ }
|
|
|
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
+ div {
|
|
|
+ width: 330px;
|
|
|
+ height: 20px;
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC, PingFangSC-Medium;
|
|
|
+ font-weight: 500;
|
|
|
+ text-align: left;
|
|
|
+ color: #050026;
|
|
|
+ line-height: 20px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 10px;
|
|
|
+ right: 25px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ display: inline-block;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 8px;
|
|
|
}
|
|
|
|
|
|
- .main {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- padding-left: 12px;
|
|
|
- position: relative;
|
|
|
- width: 380px;
|
|
|
- height: 150px;
|
|
|
-
|
|
|
- .main-title {
|
|
|
- display: inline-block;
|
|
|
- vertical-align: top;
|
|
|
- font-size: 16px;
|
|
|
- font-family: PingFangSC, PingFangSC-Medium;
|
|
|
- font-weight: 500;
|
|
|
- text-align: left;
|
|
|
- color: #050026;
|
|
|
- line-height: 22px;
|
|
|
- word-wrap: break-word;
|
|
|
- text-overflow: ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 1;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .main-content {
|
|
|
- margin-top: 10px;
|
|
|
- font-size: 14px;
|
|
|
- height: 35px;
|
|
|
- word-wrap: break-word;
|
|
|
- text-overflow: ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- overflow: hidden;
|
|
|
- color: #949494;
|
|
|
- line-height: 17px;
|
|
|
- }
|
|
|
-
|
|
|
- div {
|
|
|
- width: 330px;
|
|
|
- height: 20px;
|
|
|
- display: inline-block;
|
|
|
- font-size: 14px;
|
|
|
- font-family: PingFangSC, PingFangSC-Medium;
|
|
|
- font-weight: 500;
|
|
|
- text-align: left;
|
|
|
- color: #050026;
|
|
|
- line-height: 20px;
|
|
|
- position: absolute;
|
|
|
- bottom: 10px;
|
|
|
- right: 25px;
|
|
|
-
|
|
|
- img {
|
|
|
- display: inline-block;
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- border-radius: 50%;
|
|
|
- margin-right: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- span {
|
|
|
- display: inline-block;
|
|
|
- width: 71px;
|
|
|
- height: 26px;
|
|
|
- line-height: 26px;
|
|
|
- opacity: 0.8;
|
|
|
- background: linear-gradient(90deg, #00a3ff, #57c38f);
|
|
|
- border-radius: 13px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 400;
|
|
|
- text-align: center;
|
|
|
- color: #ffffff;
|
|
|
- letter-spacing: 0.6px;
|
|
|
- float: right;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ width: 71px;
|
|
|
+ height: 26px;
|
|
|
+ line-height: 26px;
|
|
|
+ opacity: 0.8;
|
|
|
+ background: linear-gradient(90deg, #00a3ff, #57c38f);
|
|
|
+ border-radius: 13px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: center;
|
|
|
+ color: #ffffff;
|
|
|
+ letter-spacing: 0.6px;
|
|
|
+ float: right;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.footer {
|
|
|
- width: 100%;
|
|
|
- height: 50px;
|
|
|
- margin-top: 100px;
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ margin-top: 100px;
|
|
|
|
|
|
- display: inline-block;
|
|
|
+ display: inline-block;
|
|
|
}
|
|
|
</style>
|
|
|
|
WINDOWS-7IFQK7E\EDY