个人导学

src/assets/icons/iconfont.css

@@ -1,9 +1,9 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3452620 */
-  src: url('//at.alicdn.com/t/c/font_3452620_abv8vi7qstr.woff2?t=1660122366441') format('woff2'),
-  url('//at.alicdn.com/t/c/font_3452620_abv8vi7qstr.woff?t=1660122366441') format('woff'),
-  url('//at.alicdn.com/t/c/font_3452620_abv8vi7qstr.ttf?t=1660122366441') format('truetype'),
-  url('//at.alicdn.com/t/c/font_3452620_abv8vi7qstr.svg?t=1660122366441#iconfont') format('svg');
+  src: url('//at.alicdn.com/t/c/font_3452620_k2i0v1e83z8.woff2?t=1661237745947') format('woff2'),
+  url('//at.alicdn.com/t/c/font_3452620_k2i0v1e83z8.woff?t=1661237745947') format('woff'),
+  url('//at.alicdn.com/t/c/font_3452620_k2i0v1e83z8.ttf?t=1661237745947') format('truetype'),
+  url('//at.alicdn.com/t/c/font_3452620_k2i0v1e83z8.svg?t=1661237745947#iconfont') format('svg');
 }
 
 .iconfont {
@@ -14,6 +14,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-youjiantou-02:before {
+  content: "\e63a";
+}
+
 .icon-shoucang:before {
   content: "\e617";
 }

src/assets/styles/common.scss

@@ -569,7 +569,9 @@
 .bg-white {
   background-color: #FFFFFF;
 }
-
+.text-white {
+  color: #FFFFFF;
+}
 .bg-primary {
   background-color: #47C6A2;
   color: #FFFFFF;

src/views/questioncenter/components/main-card/mx-card.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="mx-card">
+    <div class="header">
+      <span class="bold f24">{{title}}</span>
+      <span class="bold f16 pointer" @click="toMore" v-if="morePath">更多<icon class="ml5 iconfont icon-youjiantou-02"></icon></span>
+    </div>
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  props:{
+    morePath: {
+      type:String,
+      default:''
+    },
+    title:{
+      type:String,
+      default:''
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    toMore(){
+      this.$router.push(this.morePath)
+    }
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.mx-card{
+  background: #fff;
+  border-radius: 4px;
+  padding:20px 16px;
+  width: 100%;
+  .header{
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+  }
+}
+</style>

src/views/questioncenter/components/main-card/mx-image-wrap.vue

@@ -0,0 +1,43 @@
+<template>
+  <el-row :gutter="20">
+    <el-col class="relative pointer" :span="24/list.length" v-for="item in list" @click.native="navigator(item.path)">
+      <img  style="width:100%" :src="item.img"/>
+      <p class="absolute bold" :class="[item.titleAlign,titleClass]">{{ item.title }}</p>
+    </el-col>
+  </el-row>
+</template>
+<script>
+export default {
+  props:{
+    list:{
+      type:Array,
+      default:[]
+    },
+    titleClass:{
+      type:String,
+      default: ''
+    }
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    navigator(path) {
+      if(!path) return
+      this.$router.push({ path: path });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.center{
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.left{
+  left: 20px;
+  bottom: 20px;
+}
+</style>

src/views/questioncenter/main.vue

@@ -1,195 +1,86 @@
 <template>
   <!-- 题库中心首页 -->
-  <div class="que_bank">
-    <el-card>
-      <!-- 智能练习 -->
-      <el-row class="frist_wrap">
-        <el-col :span="12">
-          <div>
-            <div class="title">
-              <img src="@/assets/images/icon_timu.png" alt="" />
-              <span>智能练习</span>
-            </div>
-            <div class="sort_container">
-              <div class="img_item">
-                <img
-                  src="@/assets/images/img_tongbuzaixian.png"
-                  @click="toNavgator('/question-center/smartExercise', 0)"
-                  alt=""
-                />
-              </div>
-              <div class="img_item">
-                <img
-                  src="@/assets/images/img_zhishidianzaixian.png"
-                  @click="toNavgator('/question-center/smartExercise', 1)"
-                  alt=""
-                />
-              </div>
-            </div>
-          </div>
-        </el-col>
-        <el-col :span="12">
-          <div>
-            <div class="title">
-              <img src="@/assets/images/icon_zuanshi.png" alt="" />
-              <span>精品试卷</span>
-            </div>
-            <div class="sort_container">
-              <div class="img_item">
-                <img
-                  src="@/assets/images/img_mingxiaoshijuan.png"
-                  @click="toNavgator('/question-center/bestPaper', 0)"
-                  alt=""
-                />
-              </div>
-              <div class="img_item">
-                <img
-                  src="@/assets/images/img_linianzhenti.png"
-                  @click="toNavgator('/question-center/bestPaper', 1)"
-                  alt=""
-                />
-              </div>
-            </div>
-          </div>
-        </el-col>
-      </el-row>
-      <!-- 组卷中心 -->
-      <div class="que_center">
-        <div class="title">
-          <img src="@/assets/images/icon_zujuan.png" alt="" />
-          <span>组卷中心</span>
-        </div>
-        <div class="zujuan_wrap">
-          <div class="zujuan_item">
-            <img
-              src="@/assets/images/img_shoudongzujuan.png"
-              @click="toNavgator('/question-center/generatingPaperCenter', 0)"
-            />
-          </div>
-          <div class="zujuan_item">
-            <img
-              src="@/assets/images/img_zhinengzujun.png"
-              @click="toNavgator('/question-center/generatingPaperCenter', 1)"
-            />
-          </div>
-          <div class="zujuan_item">
-            <img
-              src="@/assets/images/img_zujuanjilu.png"
-              @click="toNavgator('/question-center/generatingPaperCenter', 2)"
-            />
-          </div>
-        </div>
-      </div>
-      <!-- 学习助手 -->
-      <div class="xuexi_zhushou">
-        <div class="title">
-          <img src="@/assets/images/icon_xuexizushou.png" alt="" />
-          <span>学习助手</span>
-        </div>
-        <div class="zujuan_wrap">
-          <div class="zujuan_item">
-            <img
-              src="@/assets/images/img_shoucangjia.png"
-              @click="toNavgator('/question-center/learningAssitant', 0)"
-              alt=""
-            />
-          </div>
-          <div class="zujuan_item">
-            <img
-              src="@/assets/images/img_cuotiben.png"
-              @click="toNavgator('/question-center/learningAssitant', 1)"
-              alt=""
-            />
-          </div>
-          <div class="zujuan_item">
-            <img
-              src="@/assets/images/img_xuexijilu.png"
-              @click="toNavgator('/question-center/learningAssitant', 2)"
-              alt=""
-            />
-          </div>
-        </div>
-      </div>
-      <!-- 各科考点 -->
-      <!-- <div class="subjects">
-        <div class="title">
-          <img src="@/assets/images/icon_gekekaodian.png" alt="" />
-          <span>各科考点</span>
-        </div>
-        <div class="subject_con">
-          <div class="subject_item">
-            <img src="@/assets/images/img_yuwen.png" alt="" />
-          </div>
-          <div class="subject_item">
-            <img src="@/assets/images/img_shuxue.png" alt="" />
-          </div>
-          <div class="subject_item">
-            <img src="@/assets/images/img_yingyu.png" alt="" />
-          </div>
-          <div class="subject_item">
-            <img src="@/assets/images/img_huaxue.png" alt="" />
-          </div>
-          <div class="subject_item">
-            <img src="@/assets/images/img_shengwu.png" alt="" />
-          </div>
-          <div class="subject_item">
-            <img src="@/assets/images/img_wuli.png" alt="" />
-          </div>
-          <div class="subject_item">
-            <img src="@/assets/images/img_dili.png" alt="" />
-          </div>
-          <div class="subject_item">
-            <img src="@/assets/images/img_lishi.png" alt="" />
-          </div>
-          <div class="subject_item">
-            <img src="@/assets/images/img_zhengzhi.png" alt="" />
-          </div>
-          <div class="subject_item">
-            <div class="additional">
-              <div class="out_text">敬请期待</div>
-              <div class="info">
-                名学金榜将为您带来新兴学科考点名学金榜将为您带来新兴学科考点
-              </div>
-            </div>
-          </div>
-        </div>
-      </div> -->
-      <!-- 历年真题 -->
-      <div class="true_topic">
-        <div class="title">
-          <img src="@/assets/images/icon_linianzhenti_1.png" />
-          <span>历年真题</span>
-        </div>
-        <div class="topics">
-          <div class="topics_item" @click="toBestPaper(2021)">
-            <img src="@/assets/images/icon_linianzhenti.png" />
-            <span>2021年</span>
-          </div>
-          <div class="topics_item" @click="toBestPaper(2020)">
-            <img src="@/assets/images/icon_linianzhenti.png" />
-            <span>2020年</span>
-          </div>
-          <div class="topics_item" @click="toBestPaper(2019)">
-            <img src="@/assets/images/icon_linianzhenti.png" />
-            <span>2019年</span>
-          </div>
-          <div class="topics_item" @click="toBestPaper(2018)">
-            <img src="@/assets/images/icon_linianzhenti.png" />
-            <span>2018年</span>
-          </div>
-          <div class="topics_item" @click="toBestPaper(2017)">
-            <img src="@/assets/images/icon_linianzhenti.png" />
-            <span>2017年</span>
-          </div>
-        </div>
-      </div>
-    </el-card>
+  <div class="container">
+    <div class="banner">
+      <el-image style="width: 100vw" :src="require('@/assets/images/question-banner.png')" fit="none" > </el-image>
+    </div>
+    <div class="content">
+      <mx-card title="智能练习" class="mb20">
+        <mx-image-wrap :list="zhineng"></mx-image-wrap>
+      </mx-card>
+      <mx-card title="精品试卷" class="mb20" more-path="1">
+        <el-tabs type="card">
+          <el-tab-pane label="名校试卷">名校试卷</el-tab-pane>
+          <el-tab-pane label="历年真题">历年真题</el-tab-pane>
+        </el-tabs>
+      </mx-card>
+      <mx-card title="组卷中心" class="mb20">
+        <mx-image-wrap :list="zujuan" titleClass="text-white"></mx-image-wrap>
+      </mx-card>
+      <mx-card title="视频课程" more-path="1">
+        <el-tabs type="card">
+          <el-tab-pane label="同步课程">同步课程</el-tab-pane>
+          <el-tab-pane label="高考课程">高考课程</el-tab-pane>
+        </el-tabs>
+      </mx-card>
+    </div>
   </div>
 </template>
 <script>
+import MxCard from '@/views/questioncenter/components/main-card/mx-card.vue'
+import MxImageWrap from '@/views/questioncenter/components/main-card/mx-image-wrap.vue'
+import { mapGetters } from 'vuex'
+import store from '@/store'
 export default {
+  components:{MxCard,MxImageWrap},
   data() {
-    return {};
+    return {
+      // 智能练习
+      zhineng: [
+        {
+          title:'同步练习',
+          img:require('@/assets/images/tongbuzaixian.png'),
+          titleAlign: 'center',
+          path:'/question-center/smartExercise?tabActive=0',
+        },
+        {
+          title:'知识点练习',
+          img:require('@/assets/images/zhishidianzaixian.png'),
+          titleAlign: 'center',
+          path:'/question-center/smartExercise?tabActive=1',
+
+        }
+      ],
+      zujuan:[
+        {
+          title:'智能组卷',
+          img:require('@/assets/images/smart_volume.png'),
+          titleAlign: 'left',
+          path:'/question-center/generatingPaperCenter?tabActive=0',
+        },
+        {
+          title:'手动组卷',
+          img:require('@/assets/images/manually.png'),
+          titleAlign: 'left',
+          path:'/question-center/generatingPaperCenter?tabActive=1',
+        },
+        {
+          title:'组卷记录',
+          img:require('@/assets/images/smart_record.png'),
+          titleAlign: 'left',
+          path:'/question-center/generatingPaperCenter?tabActive=2',
+        }
+      ]
+      // 组卷中心
+
+    };
+  },
+  computed:{
+    ...mapGetters([ "isWideScreen"]),
+
+  },
+  created() {
+    store.commit('SET_IS_WIDESCREEN', true)
   },
   methods: {
     toNavgator(path, tabActive) {
@@ -205,117 +96,13 @@ export default {
 };
 </script>
 <style scoped>
-.que_bank {
-  padding: 20px;
-}
-.sort_container {
-  display: flex;
-}
-.frist_wrap {
-  margin-bottom: 40px;
-}
-.sort_container .img_item {
-  margin-right: 16px;
-  flex: 1;
-}
-.sort_container .img_item img {
-  width: 100%;
-  cursor: pointer;
-}
-.title {
-  display: flex;
-  align-items: center;
-  height: 25px;
-  font-size: 18px;
-  font-family: PingFangSC-Medium, PingFang SC;
-  font-weight: 500;
-  color: #ffa400;
-  line-height: 25px;
-  margin-bottom: 16px;
-}
-.title img {
-  margin-right: 8px;
-}
-.zujuan_wrap {
-  display: flex;
-}
-.zujuan_wrap > div {
-  margin-right: 16px;
-  flex-grow: 1;
-}
-.zujuan_wrap > div > img {
-  cursor: pointer;
-  width: 100%;
-  height: 100%;
-}
-.que_center,
-.frist_wrap,
-.xuexi_zhushou,
-.subjects {
-  margin-bottom: 40px;
-}
-.subject_con {
-  display: flex;
-  flex-wrap: wrap;
-}
-.subject_con .subject_item {
-  flex: 20%;
-  margin-bottom: 16px;
-  padding-right: 21px;
-}
-.subject_con .subject_item > img {
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-}
-
-.subject_con .subject_item:last-child {
-  position: relative;
-}
-.subject_con .additional {
-  width: 100%;
-  background: #f2f2f2;
-  padding: 20px 0 0 0;
-  height: 100%;
-}
-.additional .out_text {
-  font-size: 21px;
-  font-family: SFNSDisplay;
-  color: #c5c5c5;
-  padding-left: 28px;
-  margin-bottom: 8px;
-  line-height: 24px;
-}
-.additional .info {
-  font-size: 14px;
-  font-family: AppleSystemUIFont;
-  color: #c5c5c5;
-  line-height: 17px;
-  padding: 0 28px;
-}
-.topics {
-  padding-top: 24px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.topics .topics_item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  font-size: 14px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  flex: 1;
-  color: #4a4a4a;
-}
-.topics .topics_item img {
-  cursor: pointer;
-}
-.topics_item > span {
-  margin-top: 10px;
-}
-.true_topic {
-  margin-bottom: 58px;
+.content{
+  width: 70%;
+  margin: 0 auto;
+  padding-bottom: 20px;
+  margin-top: 20px;
+}
+.container{
+  background: #f5f4f9;
 }
 </style>