Browse Source

index block - border raduis adjust to 8px

hare8999@163.com 1 year ago
parent
commit
0c43ca41d4
32 changed files with 160 additions and 77 deletions
  1. BIN
      src/assets/images/index/banner/elective-banner.png
  2. BIN
      src/assets/images/index/elective/elective-course-table.png
  3. BIN
      src/assets/images/index/elective/elective-dispatch-result.png
  4. BIN
      src/assets/images/index/elective/elective-dispatch-student.png
  5. BIN
      src/assets/images/index/elective/elective-dispatch-teacher.png
  6. BIN
      src/assets/images/index/elective/elective-dispatch.png
  7. BIN
      src/assets/images/index/elective/elective-generation.png
  8. BIN
      src/assets/images/index/elective/elective-open.png
  9. BIN
      src/assets/images/index/elective/elective-report.png
  10. BIN
      src/assets/images/index/elective/elective-select.png
  11. BIN
      src/assets/images/index/elective/test-career.png
  12. BIN
      src/assets/images/index/elective/test-elective.png
  13. BIN
      src/assets/images/index/elective/test-mental-health.png
  14. BIN
      src/assets/images/index/elective/test-multiway.png
  15. BIN
      src/assets/images/index/elective/three-profession.png
  16. BIN
      src/assets/images/index/elective/three-subject-query.png
  17. BIN
      src/assets/images/index/elective/three-university.png
  18. BIN
      src/assets/images/index/elective/three-vocation.png
  19. 8 0
      src/assets/styles/common.scss
  20. 20 60
      src/views/elective/main.vue
  21. 6 1
      src/views/index/components/index-card-career.vue
  22. 3 3
      src/views/index/components/index-card-college.vue
  23. 1 1
      src/views/index/components/index-card-news-single.vue
  24. 1 1
      src/views/index/components/index-card-news.vue
  25. 5 5
      src/views/index/components/index-card-simulate-f4.vue
  26. 3 3
      src/views/index/components/index-card-test-news.vue
  27. 54 0
      src/views/index/components/index-card-test4.vue
  28. 52 0
      src/views/index/components/index-card-three-subject-query.vue
  29. 4 0
      src/views/index/components/index-card.vue
  30. 1 1
      src/views/index/components/index-news-top-wrapper.vue
  31. 1 1
      src/views/index/components/login-form-banner.vue
  32. 1 1
      src/views/index/login.vue

BIN
src/assets/images/index/banner/elective-banner.png


BIN
src/assets/images/index/elective/elective-course-table.png


BIN
src/assets/images/index/elective/elective-dispatch-result.png


BIN
src/assets/images/index/elective/elective-dispatch-student.png


BIN
src/assets/images/index/elective/elective-dispatch-teacher.png


BIN
src/assets/images/index/elective/elective-dispatch.png


BIN
src/assets/images/index/elective/elective-generation.png


BIN
src/assets/images/index/elective/elective-open.png


BIN
src/assets/images/index/elective/elective-report.png


BIN
src/assets/images/index/elective/elective-select.png


BIN
src/assets/images/index/elective/test-career.png


BIN
src/assets/images/index/elective/test-elective.png


BIN
src/assets/images/index/elective/test-mental-health.png


BIN
src/assets/images/index/elective/test-multiway.png


BIN
src/assets/images/index/elective/three-profession.png


BIN
src/assets/images/index/elective/three-subject-query.png


BIN
src/assets/images/index/elective/three-university.png


BIN
src/assets/images/index/elective/three-vocation.png


+ 8 - 0
src/assets/styles/common.scss

@@ -297,6 +297,10 @@
   padding-bottom: 5px;
 }
 
+.pb3 {
+  padding-bottom: 3px;
+}
+
 .pt60 {
   padding-top: 60px;
 }
@@ -333,6 +337,10 @@
   padding-top: 5px;
 }
 
+.pt3 {
+  padding-top: 3px;
+}
+
 .rd40 {
   border-radius: 40px;
 }

+ 20 - 60
src/views/elective/main.vue

@@ -1,18 +1,13 @@
 <template>
   <div class="app-back">
-    <div class="banner">
-      <el-image style="width: 100vw" :src="`${$imgBase}index/banner/elective_banner.png`" fit="cover"></el-image>
-    </div>
+    <div class="index-banner" :style="bannerStyle" />
     <div class="fx-cen-cen fx-column pb20">
-      <index-card-subject-query class="mt20 index-block"/>
-      <index-card-elective-test class="mt20 index-block"/>
+      <index-card-three-subject-query class="mt20 index-block" />
+      <index-card-test4 class="mt20 index-block" />
       <index-card-career class="mt20 index-block"/>
-      <!--  三库 -->
-      <index-card-college class="mt20 index-block"></index-card-college>
-      <!--  资讯 -->
+      <index-card-college class="mt20 index-block" />
       <index-card-news-single class="mt20 index-block" type="高考政策" morePath="/fuzhu/newGaokaoNews"  />
-      <!--  大数据选科, 老师没有选科权限   -->
-      <index-card-elective v-if="!hiddenElectiveBlock" class="mt20 index-block"></index-card-elective>
+      <index-card-elective v-if="!hiddenElectiveBlock" class="mt20 index-block" />
     </div>
   </div>
 </template>
@@ -23,53 +18,29 @@ import IndexCardElectiveTest from '@/views/index/components/index-card-elective-
 import IndexCardSubjectQuery from '@/views/index/components/index-card-subject-query'
 import IndexCardNewsSingle from '@/views/index/components/index-card-news-single'
 import IndexCard from '@/views/index/components/index-card'
-import IndexCardCollege from '@/views/index/components/index-card-college.vue'
 import IndexCardElective from '@/views/index/components/index-card-elective'
+import IndexCardCollege from "@/views/index/components/index-card-college.vue";
+import IndexCardThreeSubjectQuery from "@/views/index/components/index-card-three-subject-query.vue";
+import IndexCardTest4 from "@/views/index/components/index-card-test4.vue";
 
 export default {
   components: {
+    IndexCardTest4,
+    IndexCardThreeSubjectQuery,
+    IndexCardCollege,
     IndexCardNewsSingle,
     IndexCardElectiveTest,
     IndexCardSubjectQuery,
     IndexCardCareer,
-    IndexCard,
     IndexCardElective,
-    IndexCardCollege
+    IndexCard
   },
   data() {
     return {
-      plan: [
-        {
-          title: '批次控制线',
-          img:`${this.$imgBase}index/zhiyuan/zhiyuan_batch.png`,
-          path: '/zhiyuan/batch'
-        },
-        {
-          title: '投档线',
-          img:`${this.$imgBase}index/zhiyuan/zhiyuan_tdx.png`,
-          path: '/zhiyuan/ShiftLine'
-        },
-        {
-          title: '一分一段',
-          img:`${this.$imgBase}index/zhiyuan/zhiyuan_yfyd.png`,
-          path: '/zhiyuan/yfyd'
-        },
-        {
-          title: '招生计划',
-          img:`${this.$imgBase}index/zhiyuan/zhiyuan_plan.png`,
-          path: '/zhiyuan/enrollPlan'
-        },
-        {
-          title: '高考政策',
-          img:`${this.$imgBase}index/zhiyuan/zhiyuan_gkzc.png`,
-          path: '/fuzhu/newGaokaoNews'
-        },
-        {
-          title: '院校查询',
-          img:`${this.$imgBase}index/zhiyuan/zhiyuan_yxcx.png`,
-          path: '/new-gaokao/three/UniversitiesColleges'
-        },
-      ]
+      bannerStyle: {
+        backgroundImage: `url(${require('@/assets/images/index/banner/elective-banner.png')})`,
+        height: '300px'
+      }
     }
   },
   computed: {
@@ -83,20 +54,9 @@ export default {
 }
 </script>
 <style scoped lang="scss">
-.plan_item{
-  padding: 20px;
-  border: 1px solid #C5C5C5;
-  margin-bottom: 20px;
-  border-radius: 4px;
-  height: 134px;
-  .img-wrap{
-    width: 100%;
-    height: 100%;
-    text-align: center;
-  }
-  &:hover{
-    background: #00CCB4;
-    border: 1px solid #00CCB4;
-  }
+.index-banner {
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center center;
 }
 </style>

+ 6 - 1
src/views/index/components/index-card-career.vue

@@ -86,7 +86,12 @@ export default {
             path: path,
             nextData: nextParams,
             class: idx >= this.lineSize ? ['mt15'] : [],
-            titleClasses: ['width100', 'fx-row', 'f-666', 'pf', 'f14', 'text-ellipsis']
+            titleClasses: ['width100 fx-row f-666 pf bold f16 text-ellipsis pl12 pt5 pb8 pr12'],
+            wrapStyle: {
+              borderRadius: '8px',
+              backgroundColor: 'white',
+              overflow: 'hidden',
+            }
           }
         })
         this.currentType.list = this.list

+ 3 - 3
src/views/index/components/index-card-college.vue

@@ -2,7 +2,7 @@
   <index-card simple title="院校排名" more-text="查看全部" @more="handleMore">
     <el-row :gutter="12">
       <el-col :span="8">
-        <div class="width100 college-rank-a rd4">
+        <div class="width100 college-rank-a rd8">
           <div class="f-red f18 bold" style="letter-spacing: 3px">校友会排行榜</div>
           <index-card-content :list="listA" :gutter="0" :line-size="1">
             <template #default="{item, index}">
@@ -12,7 +12,7 @@
         </div>
       </el-col>
       <el-col :span="8">
-        <div class="width100 college-rank-b rd4">
+        <div class="width100 college-rank-b rd8">
           <div class="f-red f18 bold" style="letter-spacing: 3px">软科排行榜</div>
           <index-card-content :list="listB" :gutter="0" :line-size="1">
             <template #default="{item, index}">
@@ -22,7 +22,7 @@
         </div>
       </el-col>
       <el-col :span="8">
-        <div class="width100 college-rank-c rd4">
+        <div class="width100 college-rank-c rd8">
           <div class="f-red f18 bold" style="letter-spacing: 3px">QS排行榜</div>
           <index-card-content :list="listC" :gutter="0" :line-size="1">
             <template #default="{item, index}">

+ 1 - 1
src/views/index/components/index-card-news-single.vue

@@ -1,5 +1,5 @@
 <template>
-  <index-card :title="type"  more-text="更多" @more="handleMore">
+  <index-card :title="type"  more-text="查看全部" @more="handleMore">
         <el-row>
           <el-col v-for="news in list" :key="news.id" :span="12">
             <div class="fx-row fx-sta-cen pf f-333 pr40" style="line-height: 35px">

+ 1 - 1
src/views/index/components/index-card-news.vue

@@ -1,6 +1,6 @@
 <template>
   <index-card simple title="高考资讯" sub-title="最新、最全的高考资讯" more-text="查看全部" @more="handleMore">
-    <div class="bg-white pd20 rd4" style="height: 270px">
+    <div class="bg-white pd20 rd8" style="height: 270px">
       <el-tabs v-model="activeName" type="card" @tab-click="handleTabChanged">
         <el-tab-pane v-for="type in newsTypes" :key="type" :name="type" :label="type">
           <el-row>

+ 5 - 5
src/views/index/components/index-card-simulate-f4.vue

@@ -2,19 +2,19 @@
  <index-card simple title="高考志愿">
    <el-row :gutter="20">
      <el-col :span="14" class="pointer" @click.native="goSimulate">
-       <el-image :src="require('@/assets/images/index/login/pref-simulate.png')" class="rd4 simulate-full" />
+       <el-image :src="require('@/assets/images/index/login/pref-simulate.png')" class="rd8 simulate-full" />
      </el-col>
      <el-col :span="5">
        <el-image :src="require('@/assets/images/index/login/pref-batch-line.png')"
-                 class="rd4 pointer" @click="goBatchLine" />
+                 class="rd8 pointer" @click="goBatchLine" />
        <el-image :src="require('@/assets/images/index/login/pref-shift-line.png')"
-                 class="rd4 pointer mt20" @click="goShiftLine" />
+                 class="rd8 pointer mt20" @click="goShiftLine" />
      </el-col>
      <el-col :span="5">
        <el-image :src="require('@/assets/images/index/login/pref-score-segment.png')"
-                 class="rd4 pointer" @click="goScoreSegment" />
+                 class="rd8 pointer" @click="goScoreSegment" />
        <el-image :src="require('@/assets/images/index/login/pref-plan.png')"
-                 class="rd4 pointer mt20" @click="goPlan" />
+                 class="rd8 pointer mt20" @click="goPlan" />
      </el-col>
    </el-row>
  </index-card>

+ 3 - 3
src/views/index/components/index-card-test-news.vue

@@ -4,13 +4,13 @@
       <index-card simple title="我的测评">
         <el-row :gutter="12">
           <el-col :span="12" @click.native="goCareerTest">
-            <el-image :src="require('@/assets/images/index/login/career-test-bg.png')" class="pointer rd4"/>
+            <el-image :src="require('@/assets/images/index/login/career-test-bg.png')" class="pointer rd8"/>
           </el-col>
           <el-col :span="12" @click.native="goElectiveTest">
-            <el-image :src="require('@/assets/images/index/login/elective-test-bg.png')" class="pointer rd4"/>
+            <el-image :src="require('@/assets/images/index/login/elective-test-bg.png')" class="pointer rd8"/>
           </el-col>
           <el-col :span="24" class="mt12" @click.native="goElectiveQuery">
-            <el-image :src="require('@/assets/images/index/login/elective-query-bg.png')" class="pointer rd4"/>
+            <el-image :src="require('@/assets/images/index/login/elective-query-bg.png')" class="pointer rd8"/>
           </el-col>
         </el-row>
       </index-card>

+ 54 - 0
src/views/index/components/index-card-test4.vue

@@ -0,0 +1,54 @@
+<template>
+  <index-card simple title="我的测评">
+    <el-row :gutter="12">
+      <el-col :span="6" @click.native="goTestElective">
+        <el-image :src="require('@/assets/images/index/elective/test-elective.png')" class="rd8 pointer" />
+      </el-col>
+      <el-col :span="6" @click.native="goTestCareer">
+        <el-image :src="require('@/assets/images/index/elective/test-career.png')" class="rd8 pointer" />
+      </el-col>
+      <el-col v-if="!isHiddenV2" :span="6" @click.native="goTestMentalHealth">
+        <el-image :src="require('@/assets/images/index/elective/test-mental-health.png')" class="rd8 pointer" />
+      </el-col>
+      <el-col v-if="!isHiddenV2" :span="6" @click.native="goTestMultiway">
+        <el-image :src="require('@/assets/images/index/elective/test-multiway.png')" class="rd8 pointer" />
+      </el-col>
+    </el-row>
+  </index-card>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+import MxTransferMixin from "@/components/mx-transfer-mixin";
+import IndexLoginInterceptorMixin from "@/views/index/blocks/index-login-interceptor-mixin";
+import IndexCard from "@/views/index/components/index-card.vue";
+
+export default {
+  name: "index-card-test4",
+  components: {IndexCard},
+  mixins: [MxTransferMixin, IndexLoginInterceptorMixin],
+  computed: {
+    ...mapState({
+      isHiddenV2: state => state.user.isHiddenV2
+    })
+  },
+  methods: {
+    async goTestElective() {
+
+    },
+    async goTestCareer() {
+
+    },
+    async goTestMentalHealth() {
+
+    },
+    async goTestMultiway() {
+
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

+ 52 - 0
src/views/index/components/index-card-three-subject-query.vue

@@ -0,0 +1,52 @@
+<template>
+  <index-card simple title="三大库">
+    <el-row :gutter="20">
+      <el-col :span="8" @click.native="goUniversity">
+        <el-image :src="require('@/assets/images/index/elective/three-university.png')" class="rd8 pointer" />
+      </el-col>
+      <el-col :span="8" @click.native="goProfession">
+        <el-image :src="require('@/assets/images/index/elective/three-profession.png')" class="rd8 pointer" />
+      </el-col>
+      <el-col :span="8" @click.native="goVocation">
+        <el-image :src="require('@/assets/images/index/elective/three-vocation.png')" class="rd8 pointer" />
+      </el-col>
+      <el-col :span="24" class="mt12" @click.native="goSubjectQuery">
+        <el-image :src="require('@/assets/images/index/elective/three-subject-query.png')" class="rd8 pointer" />
+      </el-col>
+    </el-row>
+  </index-card>
+</template>
+
+<script>
+import IndexCard from "@/views/index/components/index-card.vue";
+import MxTransferMixin from "@/components/mx-transfer-mixin";
+import IndexLoginInterceptorMixin from "@/views/index/blocks/index-login-interceptor-mixin";
+
+export default {
+  name: "index-card-three-subject-query",
+  components: {IndexCard},
+  mixins: [MxTransferMixin, IndexLoginInterceptorMixin],
+  methods: {
+    async goUniversity() {
+      await this.loginCheck()
+      this.transferTo('/new-gaokao/three/UniversitiesColleges')
+    },
+    async goProfession() {
+      await this.loginCheck()
+      this.transferTo('/new-gaokao/three/ProfessLib')
+    },
+    async goVocation() {
+      await this.loginCheck()
+      this.transferTo('/new-gaokao/three/Vocation')
+    },
+    async goSubjectQuery() {
+      await this.loginCheck()
+      this.transferTo('/new-gaokao/careerSubjectIndex')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

+ 4 - 0
src/views/index/components/index-card.vue

@@ -30,6 +30,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.el-card {
+  border-radius: 8px;
+}
+
 ::v-deep .el-card__header {
   min-height: 60px;
   padding: 30px 12px 5px 12px;

+ 1 - 1
src/views/index/components/index-news-top-wrapper.vue

@@ -15,7 +15,7 @@ export default {
   data() {
     return {
       newsOverride: {
-        contentWrapClass: 'bg-white pd20 rd4',
+        contentWrapClass: 'bg-white pd20 rd8',
         simple: true
       }
     }

+ 1 - 1
src/views/index/components/login-form-banner.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="fx-row fx-end-cen login-form-container" style="padding: 40px 0;"
        :style="{backgroundImage: `url(${require('@/assets/images/index/login/banner.png')})`} ">
-    <div class="bg-white rd4 login-form-block">
+    <div class="bg-white rd8 login-form-block">
       <img style="width: 56%;margin-left:19.5%;" src="@/assets/images/login_logo.png"/>
       <div class="f-primary text-center mt15 mb20 bold f18" style="letter-spacing: 10px;">
         WELCOME

+ 1 - 1
src/views/index/login.vue

@@ -5,7 +5,7 @@
     </el-header>
     <el-main class="p0">
       <login-top-menus></login-top-menus>
-      <login-form-banner ref="loginForm" :login-form="loginForm" :loading="loading"></login-form-banner>
+      <login-form-banner ref="loginForm" :login-form="loginForm" :loading="loading" />
       <div class="fx-column fx-cen-cen">
         <index-card-career class="mt20 index-block"/>
         <index-card-test-news class="mt20 index-block" />