首页

src/components/HelloWorld.vue

@@ -1,52 +1,117 @@
 <template>
-  <div class="hello">
+  <div class="ele_test_box">
-    <div> {{$t('message.hello')}} </div>
+    <!-- 常用效果 Popover 弹出框组件 具体属性查看官方文档-->
-    <button @click="switchLang">{{$t('message.switch')}}</button>
+    <el-popover placement="bottom" title="标题" width="400" trigger="click" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
+      <span>11111111111111111</span> <!-- 利用分发取代content属性 可以嵌套表单表格按钮等组件-->
+      <el-button slot="reference">click 激活</el-button>
+    </el-popover>
+    <!-- Carousel 走马灯组件 -->
+    <el-carousel :interval="3000" type="card" height="200px">
+      <el-carousel-item v-for="item in 4" :key="item">
+        <h3>{{ item }}</h3>
+      </el-carousel-item>
+    </el-carousel>
+    <!-- Collapse 折叠面板 -->
+    <el-collapse v-model="activeIndex" @change="handleChange">
+      <el-collapse-item title="第一块面板（操作互不干扰）" name="1">
+        <div>第一块的内容是在这里</div>
+        <div>通过accordion属性来设置是否以手风琴模式显示。</div>
+      </el-collapse-item>
+      <el-collapse-item title="第二块面板（操作互不干扰）" name="2">
+        <div>第二块的内容是在这里</div>
+      </el-collapse-item>
+      <el-collapse-item title="第三块面板（操作互不干扰）" name="3">
+        <div>第三块的内容是在这里</div>
+      </el-collapse-item>
+      <el-collapse-item>
+        <template slot="title">
+          <i class="header-icon el-icon-caret-left"></i>第四块的内容是在这里<i class="header-icon el-icon-caret-right"></i>
+        </template>
+        <div>除了可以通过title属性以外,还可以通过具名slot来实现自定义面板的标题内容，以实现增加图标等效果</div>
+      </el-collapse-item>
+    </el-collapse>
+    <div>分别通过<span style="color: red">(default-expanded-keys)和(default-checked-keys)</span>设置默认展开和默认选中的节点,需要注意的是,此时必须设置<span style="color: red">(node-key)</span>,其值为节点数据中的一个字段名,该字段在整棵树中是唯一的.</div>
+    <el-tree :data="data2" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]" :props="defaultProps">
+    </el-tree>
+    <div style="margin-top: 30px;">
+      <el-button type="primary" @click="goNextPage">跳转页面</el-button>
+    </div>
   </div>
 </template>
 <script>
-import {test} from '@/api/test'
 export default {
-  name: 'HelloWorld',
+  data() {
-  components: {
-  },
-  data () {
     return {
+      activeIndex: ['1'], //默认展开第一块
+      data2: [{
+        id: 1,
+        label: '一级 1',
+        children: [{
+          id: 4,
+          label: '二级 1-1',
+          children: [{
+            id: 9,
+            label: '三级 1-1-1'
+          }, {
+            id: 10,
+            label: '三级 1-1-2'
+          }]
+        }]
+      }, {
+        id: 2,
+        label: '一级 2',
+        children: [{
+          id: 5,
+          label: '二级 2-1'
+        }, {
+          id: 6,
+          label: '二级 2-2',
+          disabled: true //通过disabled设置禁用状态
+        }]
+      }, {
+        id: 3,
+        label: '一级 3',
+        children: [{
+          id: 7,
+          label: '二级 3-1'
+        }, {
+          id: 8,
+          label: '二级 3-2'
+        }]
+      }],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      }
     }
   },
-  computed: {
-  },
   methods: {
-    switchLang () {
+    handleChange(val) {
-      test().then(res =>{
+      console.log(val);
-        console.log(res)
+    },
-      })
+    //跳转下一页面
-      let lang = ''
+    goNextPage() {
-      if (this.$i18n.locale === 'en') {
+      this.$router.push({ name: 'tableTest' })
-        lang = 'cn'
-      } else {
-        lang = 'en'
-      }
-      this.$i18n.locale = lang;
     }
   }
 }
-</script>
 
+</script>
 <style scoped>
-h1,
+.el-carousel__item h3 {
-h2 {
+  color: #fff;
-  font-weight: normal;
+  font-size: 24px;
+  opacity: 0.75;
+  line-height: 200px;
+  margin: 0;
 }
-ul {
+
-  list-style-type: none;
+.el-carousel__item:nth-child(2n) {
-  padding: 0;
+  background-color: #333;
 }
-li {
+
-  display: inline-block;
+.el-carousel__item:nth-child(2n+1) {
-  margin: 0 10px;
+  background-color: #ff9933;
-}
-a {
-  color: #42b983;
 }
+
 </style>

src/i18n/langs/cn.js

@@ -12,6 +12,7 @@ const cn = {
     'examine':'考生',
     'Services portal':'服务门户',
     'news_center':'新闻中心',
+    'more':'查看更多',
   },
   ...zhLocale
 }

src/i18n/langs/en.js

@@ -12,6 +12,7 @@ const en = {
     'examine':'examine',
     'Services portal':'Services portal',
     'news_center':'News Center',
+    'more':'More',
   },
   ...enLocale
 }

src/router/index.js

@@ -24,6 +24,11 @@ const routes = [
     name: 'EduTeach',
     component: () => import(/* webpackChunkName: "about" */ '../views/edu_teach/index')
   },
+  {
+    path: '/h',
+    name: 'EduTeach',
+    component: () => import(/* webpackChunkName: "about" */ '../components/HelloWorld')
+  },
 ]
 
 const router = new VueRouter({

src/views/index/index.vue

@@ -2,6 +2,7 @@
   <div id="index">
     <el-row>
       <el-col>
+        <!--首页图片-->
         <div class="top">
           <img src="@/assets/index/sy_bj1@2x.png" alt="">
         </div>
@@ -9,53 +10,361 @@
     </el-row>
     <el-row>
       <el-col :offset="3" :span="18">
-        <div class="context">
+        <!--正文部分-->
-          <div class="news_center">
+        <div class="news_center">
+          <!--标题-->
+          <div class="title">{{ $t('message.news_center') }}</div>
+          <div class="divider">
+            <div class="divider_left">
+              <img src="@/assets/index/sy_icon_gd.png" alt="">
+            </div>
+            <div class="name">News Center</div>
+            <div class="divider_right">
+              <img src="@/assets/index/sy_icon_gd1.png" alt="">
+            </div>
+          </div>
+          <!--录播图-->
+          <div class="slideshow">
+            <el-carousel trigger="click" height="51rem">
+              <el-carousel-item v-for="item in 4" :key="item">
+                <div>
+                  <img src="@/assets/index/t1@2x.png" alt="">
+                  <div class="bottom_title">
+                    <el-row>
+                      <el-col :offset="2" :span="18">
+                        {{ item }}sdamdnalkdasdnlkadlajsdlksadjajdknakdnakldnlasnlsa
+                      </el-col>
+                    </el-row>
+                  </div>
+                </div>
+              </el-carousel-item>
+            </el-carousel>
+          </div>
+          <!--轮播图下的新闻-->
+          <div class="new_context">
+            <el-row>
+              <el-col :span="6">
+                <div class="new_content">
+                  <div class="thumbnail">
+                    <img src="@/assets/index/t2.png" alt="">
+                  </div>
+                  <div class="new_title">
+                    <p>
+                      信息引领，勇于拼搏——信息科学与技术学院在全校教职工篮球赛获佳绩
+                    </p>
+                  </div>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="new_content">
+                  <div class="thumbnail">
+                    <img src="@/assets/index/t2.png" alt="">
+                  </div>
+                  <div class="new_title">
+                    <p>
+                      信息引领，勇于拼搏——信息科学与技术学院在全校教职工篮球赛获佳绩
+                    </p>
+                  </div>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="new_content">
+                  <div class="thumbnail">
+                    <img src="@/assets/index/t2.png" alt="">
+                  </div>
+                  <div class="new_title">
+                    <p>
+                      信息引领，勇于拼搏——信息科学与技术学院在全校教职工篮球赛获佳绩
+                    </p>
+                  </div>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="new_content">
+                  <div class="thumbnail">
+                    <img src="@/assets/index/t2.png" alt="">
+                  </div>
+                  <div class="new_title">
+                    <p>
+                      信息引领，勇于拼搏——信息科学与技术学院在全校教职工篮球赛获佳绩
+                    </p>
+                  </div>
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
 
-
+        <!--更多-->
-            <div class="title">{{ $t('message.news_center') }}</div>
+        <div class="more_title">{{ $t('message.more') }}</div>
-            <div class="divider">
+        <div class="more_img">
+          <img src="@/assets/index/sy_icon_zhdl.png" alt="">
+        </div>
+      </el-col>
+    </el-row>
+    <div class="scientific_research">
+      <el-row>
+        <el-col :offset="3" :span="18">
+          <div>
+            <!--标题-->
+            <div class="title" style="background: #FFFFFF; color: #1956BC;margin-bottom: 2rem;">科学研究</div>
+            <div class="divider" style="width: 80rem;">
               <div class="divider_left">
                 <img src="@/assets/index/sy_icon_gd.png" alt="">
               </div>
-              <div class="name">News Center</div>
+              <div class="name" style="color: #FFFFFF;">Scientific research trends</div>
               <div class="divider_right">
                 <img src="@/assets/index/sy_icon_gd1.png" alt="">
               </div>
             </div>
 
-            <div class="slideshow">
+            <el-row>
-              <el-carousel trigger="click" height="51rem">
+              <el-col :offset="3" span="18">
-                <el-carousel-item v-for="item in 4" :key="item">
+                <div class="first">
-                  <div>
+                  <el-row>
-                    <img src="@/assets/index/t1@2x.png" alt="">
+                    <el-col :span="12">
-                    <div class="bottom_title">
+                      <div class="row_text">
-                      <el-row>
+                        <div class="img">
-                        <el-col :offset="2" :span="18">
+                          <img src="@/assets/index/sy_icon_bh1.png" alt="">
-                          {{ item }}sdamdnalkdasdnlkadlajsdlksadjajdknakdnakldnlasnlsa
+                        </div>
-                        </el-col>
+                        <div class="text">科研院关于组织申报国家重点研发计划 …</div>
-                      </el-row>
+                        <div class="time">2021.11.10</div>
-                    </div>
+                      </div>
-                  </div>
+                      <div style="margin-left: 4rem">
-                </el-carousel-item>
+                        <hr style="width: 40rem; border: 0.1rem solid #E6E6E6;">
-              </el-carousel>
+                      </div>
+                    </el-col>
+                    <el-col :span="12">
+                      <div class="row_text">
+                        <div class="img">
+                          <img src="@/assets/index/sy_icon_bh6.png" alt="">
+                        </div>
+                        <div class="text">科研院关于组织申报国家重点研发计划 …</div>
+                        <div class="time">2021.10.21</div>
+                      </div>
+                      <div style="margin-left: 4rem">
+                        <hr style="width: 40rem; border: 0.1rem solid #E6E6E6;">
+                      </div>
+                    </el-col>
+                  </el-row>
+                  <el-row>
+                    <el-col :span="12">
+                      <div class="row_text">
+                        <div class="img">
+                          <img src="@/assets/index/sy_icon_bh2.png" alt="">
+                        </div>
+                        <div class="text">科研院关于组织申报国家重点研发计划 …</div>
+                        <div class="time">2021.11.10</div>
+                      </div>
+                      <div style="margin-left: 4rem">
+                        <hr style="width: 40rem; border: 0.1rem solid #E6E6E6;">
+                      </div>
+                    </el-col>
+                    <el-col :span="12">
+                      <div class="row_text">
+                        <div class="img">
+                          <img src="@/assets/index/sy_icon_bh7.png" alt="">
+                        </div>
+                        <div class="text">科研院关于组织申报国家重点研发计划 …</div>
+                        <div class="time">2021.10.21</div>
+                      </div>
+                      <div style="margin-left: 4rem">
+                        <hr style="width: 40rem; border: 0.1rem solid #E6E6E6;">
+                      </div>
+                    </el-col>
+                  </el-row>
+                  <el-row>
+                    <el-col :span="12">
+                      <div class="row_text">
+                        <div class="img">
+                          <img src="@/assets/index/sy_icon_bh3.png" alt="">
+                        </div>
+                        <div class="text">科研院关于组织申报国家重点研发计划 …</div>
+                        <div class="time">2021.11.10</div>
+                      </div>
+                      <div style="margin-left: 4rem">
+                        <hr style="width: 40rem; border: 0.1rem solid #E6E6E6;">
+                      </div>
+                    </el-col>
+                    <el-col :span="12">
+                      <div class="row_text">
+                        <div class="img">
+                          <img src="@/assets/index/sy_icon_bh8.png" alt="">
+                        </div>
+                        <div class="text">科研院关于组织申报国家重点研发计划 …</div>
+                        <div class="time">2021.10.21</div>
+                      </div>
+                      <div style="margin-left: 4rem">
+                        <hr style="width: 40rem; border: 0.1rem solid #E6E6E6;">
+                      </div>
+                    </el-col>
+                  </el-row>
+                  <el-row>
+                    <el-col :span="12">
+                      <div class="row_text">
+                        <div class="img">
+                          <img src="@/assets/index/sy_icon_bh4.png" alt="">
+                        </div>
+                        <div class="text">科研院关于组织申报国家重点研发计划 …</div>
+                        <div class="time">2021.11.10</div>
+                      </div>
+                      <div style="margin-left: 4rem">
+                        <hr style="width: 40rem; border: 0.1rem solid #E6E6E6;">
+                      </div>
+                    </el-col>
+                    <el-col :span="12">
+                      <div class="row_text">
+                        <div class="img">
+                          <img src="@/assets/index/sy_icon_bh9.png" alt="">
+                        </div>
+                        <div class="text">科研院关于组织申报国家重点研发计划 …</div>
+                        <div class="time">2021.10.21</div>
+                      </div>
+                      <div style="margin-left: 4rem">
+                        <hr style="width: 40rem; border: 0.1rem solid #E6E6E6;">
+                      </div>
+                    </el-col>
+                  </el-row>
+                  <el-row>
+                    <el-col :span="12">
+                      <div class="row_text">
+                        <div class="img">
+                          <img src="@/assets/index/sy_icon_bh5.png" alt="">
+                        </div>
+                        <div class="text">科研院关于组织申报国家重点研发计划 …</div>
+                        <div class="time">2021.11.10</div>
+                      </div>
+                    </el-col>
+                    <el-col :span="12">
+                      <div class="row_text">
+                        <div class="img">
+                          <img src="@/assets/index/sy_icon_bh10.png" alt="">
+                        </div>
+                        <div class="text">科研院关于组织申报国家重点研发计划 …</div>
+                        <div class="time">2021.10.21</div>
+                      </div>
+                    </el-col>
+                  </el-row>
+
+
+                </div>
+              </el-col>
+            </el-row>
+
+            <!--更多-->
+            <div class="more_title" style="margin-bottom: 2rem;background: #FFFFFF; color: #1956BC">
+              {{ $t('message.more') }}
+            </div>
+            <div class="divider" style="width: 66rem;">
+              <div class="divider_left">
+                <img src="@/assets/index/sy_icon_gd.png" alt="">
+              </div>
+              <div class="name" style="color: #FFFFFF;font-size: 2.6rem;">学术交流</div>
+              <div class="divider_right">
+                <img src="@/assets/index/sy_icon_gd1.png" alt="">
+              </div>
+            </div>
+            <el-row>
+              <el-col :offset="3" span="18">
+                <div class="communication">
+
+                </div>
+              </el-col>
+            </el-row>
+
+            <!--更多-->
+            <div class="more_title" style="background: #FFFFFF; color: #1956BC">{{ $t('message.more') }}</div>
+            <div class="more_img" style="margin-bottom: 1rem">
+              <img src="@/assets/index/sy_icon_zhdb.png" alt="">
             </div>
 
 
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="party_building_active">
 
+      <el-row>
+        <el-col :offset="3" :span="18">
+          <!--标题-->
+          <div class="title" style="background: #DA2D2D; color: #FFFFFF;margin-bottom: 2rem;">科学研究</div>
+          <div class="divider" style="width: 80rem;">
+            <div class="divider_left">
+              <img src="@/assets/index/tttl.png" alt="">
+            </div>
+            <div class="name" style="color: #DA2D2D;">Scientific research trends</div>
+            <div class="divider_right">
+              <img src="@/assets/index/tttr.png" alt="">
+            </div>
+          </div>
+          <div>
+            <el-carousel :interval="4000" type="card">
+              <el-carousel-item v-for="item in 6" :key="item">
+                <div>
+                  <img src="@/assets/index/t1@2x.png" alt="">
+                  <div class="bottom_title">
+                  </div>
+                </div>
+              </el-carousel-item>
+            </el-carousel>
+          </div>
+          <!--更多-->
+          <div class="more_title" style="background: #DA2D2D; color: #FFFFFF">{{ $t('message.more') }}</div>
+
+          <div class="more_img" style="margin-bottom: 1rem">
+            <img src="@/assets/index/sy_icon_zhdh.png" alt="">
           </div>
 
 
-
+          <div class="divider" style="width: 64rem;">
-          <div class="">
+            <div class="divider_left">
-
+              <img src="@/assets/index/tttl.png" alt="">
+            </div>
+            <div class="name" style="color: #DA2D2D;">党史教育</div>
+            <div class="divider_right">
+              <img src="@/assets/index/tttr.png" alt="">
+            </div>
           </div>
 
 
+        </el-col>
+      </el-row>
+    </div>
+    <div class="teaching_and_student">
+      <el-col>
+        <el-row :offset="3" :span="18">
+          <!--教学工作-->
+          <div class="title">教学工作</div>
+          <div class="divider" style="width: 76rem;">
+            <div class="divider_left">
+              <img src="@/assets/index/sy_icon_gd.png" alt="">
+            </div>
+            <div class="name">Teaching and student</div>
+            <div class="divider_right">
+              <img src="@/assets/index/sy_icon_gd1.png" alt="">
+            </div>
+          </div>
 
-        </div>
+
+          <!--更多-->
+          <div class="more_title">{{ $t('message.more') }}</div>
+          <div class="more_img">
+            <img src="@/assets/index/sy_icon_zhdl.png" alt="">
+          </div>
+        </el-row>
       </el-col>
-    </el-row>
+    </div>
+    <div class="bottom">
+      <el-col>
+        <el-row :offset="3" :span="18">
+        </el-row>
+      </el-col>
+
+
+    </div>
+
+
   </div>
 </template>
 
@@ -68,7 +377,7 @@ export default {
 <style scoped lang="scss">
 #index {
   .title {
-    margin: 1rem auto 1rem;
+    margin: 4rem auto 1rem;
     width: 23.2rem;
     height: 5.9rem;
     background: #1956BC;
@@ -81,6 +390,25 @@ export default {
     text-align: center;
   }
 
+  .more_title {
+    margin: 4rem auto 1rem;
+    width: 12.8rem;
+    height: 3.6rem;
+    background: #1956BC;
+    border-radius: 1.8rem;
+    font-size: 1.4rem;
+    line-height: 3.6rem;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #FFFFFF;
+    text-align: center;
+  }
+
+  .more_img {
+    text-align: center;
+    margin-top: 2rem;
+  }
+
   .divider {
     width: 70rem;
     margin: 0 auto 1rem;
@@ -109,33 +437,143 @@ export default {
     }
   }
 
-  .context {
+  .news_center {
-    .news_center {
+    .slideshow {
+
+      .el-carousel__arrow {
+        top: 93%;
+        display: block !important;
+      }
+
+      .bottom_title {
+        width: 100%;
+        height: 7rem;
+        background: #1956BC;
+        opacity: 0.89;
+        position: absolute;
+        bottom: 0;
+        line-height: 7rem;
+        font-size: 2rem;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #FFFFFF;
+      }
+
+      img {
+        width: 100%;
+      }
+    }
+
+    .new_context {
+
+      margin-top: 3rem;
+
+      .new_content {
+        margin: 0 auto;
+        height: 23rem;
+        width: 22.6rem;
+        border: 0.1rem solid #CAD9F3;
+        border-radius: 1.4rem;
+      }
+
+      .new_content:hover {
+        box-shadow: 0rem 0rem 0.7rem 0rem rgba(18, 69, 155, 0.59);
+      }
+
+      .thumbnail {
+        height: 14rem;
+      }
+
+      .new_title {
+        font-size: 1.6rem;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        margin: 1rem 1rem 0rem 1rem;
+        color: #262626;
+        line-height: 2.2rem;
+      }
+    }
+
+
+  }
+
+  .scientific_research {
+    margin-top: 2rem;
+    padding-top: 4rem;
+    padding-bottom: 1rem;
+    width: 100%;
+    background-image: url("../../assets/index/sy_bj2.png");
+
+    .first {
+      padding-top: 1rem;
+      height: 34rem;
+      background: rgba(255, 255, 255, 0.9);
+      border-radius: 2.4rem;
+
+      .divider {
+        margin: 0;
+        padding: 0;
+        width: 44rem;
+      }
+
+      .row_text {
+        margin-top: 2rem;
+        height: 2.6rem;
+        line-height: 2.6rem;
+        margin-bottom: 2rem;
+        color: #1956BC;
+        font-family: PingFangSC-Medium, PingFang SC;
+        clear: left;
+
+        div {
+          float: left;
+        }
+
+        .img {
+          margin-left: 2.5rem;
+        }
+
+        .text {
+          margin-left: 1rem;
+          font-size: 1.8rem;
+          font-weight: 500;
+        }
+
+        .time {
+          text-align: center;
+          font-size: 1.2rem;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          width: 7.2rem;
+          height: 2.2rem;
+          line-height: 2.2rem;
+          border-radius: 1.1rem;
+          border: 0.1rem solid #1956BC;
+          margin-left: 3rem;
+        }
+      }
+    }
+
+    .communication {
+      width: 100%;
+      margin-top: 1rem;
+      height: 24rem;
+      background: rgba(255, 255, 255, 0.9);
     }
   }
 
-  .slideshow{
+  .party_building_active {
-
+    background-image: url('../../assets/index/sy_bj3.png');
-    .el-carousel__arrow{
-      top: 93%;
-      display: block !important;
-    }
-    .bottom_title{
-      width: 100%;
-      height: 7rem;
-      background: #1956BC;
-      opacity: 0.89;
-      position: absolute;
-      bottom: 0;
-      line-height: 7rem;
-      font-size: 2rem;
-      font-family: PingFangSC-Regular, PingFang SC;
-      font-weight: 400;
-      color: #FFFFFF;
-    }
-    img{
-      width: 100%;
-    }
   }
+
+  .teaching_and_student {
+    height: 101.2rem;
+  }
+
+  .bottom {
+    background-image: url('../../assets/index/sy_bj4.png');
+    height: 66rem;
+  }
+
 }
 </style>