标签

src/layout/altai/detail/biaoqian.vue

@@ -0,0 +1,61 @@
+<template>
+  <div id="biaoqian">
+    <el-row>
+      <el-col :span="24">
+        <ul>
+          <li>
+            <el-link href="#" style="color:#ffffff;background-color:#22529a">
+              <el-image :src="biaoqianurl" style="width:30px;height:22px;margin: 17px 0 -2px 0;"></el-image>
+              标签栏
+            </el-link>
+          </li>
+          <li v-for="(item,index) in biaoQian" :key="index">
+            <el-link :underline="false" href="#">
+              {{item.title}}
+            </el-link>
+          </li>
+        </ul>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'biaoqian',
+  props: {
+    biaoQian: null,
+  },
+  components: {},
+  data: () => ({
+    biaoqianurl: require('../../../assets/detail-biaoqian.jpg'),
+  }),
+  created() { },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+ul {
+  padding: 0;
+  list-style: none;
+  margin: 0;
+  background-color: #ffffff;
+  font-size: 22px;
+  text-align: center;
+  line-height: 60px;
+  height: 364px;
+}
+li {
+  border-bottom: 1px dotted #215496;
+}
+/deep/.el-link {
+  text-decoration: none;
+  height: 60px;
+  width: 240px;
+  display: block;
+  color: #22529a;
+  font-size: 22px;
+}
+</style>

src/layout/altai/detail/diaocha.vue

@@ -0,0 +1,69 @@
+<template>
+  <div id="diaocha">
+    <el-row>
+      <el-col :span="24" style="background-color:#22529a;height: 60px;color:#ffffff;">
+        <el-image :src="diaochaurl" style="width:30px;height:30px;margin: 17px 0 -6px 0;"></el-image>
+        网上调查
+      </el-col>
+      <el-col :span="24" style="height:142px">
+        <el-image :src="diaochaurl1" style="width:150px;height:100px;margin:20px 0 0 27px"></el-image>
+      </el-col>
+      <el-col :span="24" class="content">
+        您是否愿意继续关注本平台
+        <el-form :model="form">
+          <el-form-item>
+            <el-radio-group v-model="form.radio">
+              <el-radio label="愿意"></el-radio>
+              <el-radio label="不愿意"></el-radio>
+              <el-radio label="愿意不"></el-radio>
+              <el-radio label="愿不愿意"></el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item>
+            <el-button style="background-color:#22529a;color:#ffffff">确认提交</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'diaocha',
+  props: {},
+  components: {},
+  data: () => ({
+    diaochaurl: require('../../../assets/detail-diaocha.png'),
+    diaochaurl1: require('../../../assets/detail-diaocha1.png'),
+    form: {
+      radio: '',
+    },
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+ul {
+  padding: 0;
+  list-style: none;
+}
+.content {
+  font-size: 14px;
+}
+.el-form {
+  margin-top: 10px;
+}
+.el-radio {
+  display: block;
+  text-align: left;
+  margin-top: 10px;
+  color: #000000;
+}
+/deep/.el-radio__input.is-checked + .el-radio__label {
+  color: #000000;
+}
+</style>

src/layout/altai/detail/mainRight.vue

@@ -0,0 +1,55 @@
+<template>
+  <div id="mainRight">
+    <el-row>
+      <el-col :span="24" class="top">
+      <el-col :span="24" class="title">{{mainRight.title}}</el-col>
+      </el-col>
+      <el-col :span="16" offset="4" class="information">
+        <el-col :span="24" class="time">发布日期：{{mainRight.time}}</el-col>
+      </el-col>
+      <el-col :span="24" class="content">
+        {{mainRight.content}}
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mainRight',
+  props: {
+    mainRight:null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.top .title {
+  font-size: 22px;
+  color: #2c3350;
+  font-weight: bold;
+  padding: 10px 0;
+  margin-top: 50px;
+}
+.information{
+  margin-top:10px;
+  padding: 10px 0;
+  background-color: #eeeeee;
+  font-size: 16px;
+}
+.time{
+  float: right;
+}
+.content{
+  padding: 20px;
+  font-size: 16px;
+  line-height: 34px;
+  text-indent:2em;
+  text-align: left;
+}
+</style>

src/layout/altai/index/zixun.vue

@@ -2,7 +2,7 @@
   <div id="zixun">
     <el-row>
       <el-col :span="24" class="top">
-        <el-link :underline="false">
+        <el-link :underline="false" href="#/more">
           <el-col :span="21" class="title">最新资讯</el-col>
           <el-col :span="3" class="more">
             <el-image style="width:25px;height:25px;padding: 20px 0 0 0;" :src="dian"></el-image>
@@ -12,7 +12,7 @@
       <el-col :span="24" class="content">
         <ul>
           <li v-for="(item,index) in ziXunList" :key="index">
-            <a href="#">
+            <a href="#/detail" >
               <span class="dot"></span>
               <span>{{item.title}}</span>
               <span class="tt">{{item.time}}</span>

src/layout/altai/info/dongtai.vue

@@ -5,7 +5,7 @@
         <el-tabs type="border-card" style="height:400px">
           <el-tab-pane v-for="(item,index) in dongTaiList" :key="index">
             <span slot="label" class="title">{{item.title}}
-              <!-- <span></span> -->
+              <span></span>
             </span>
             <el-col :span="24" class="content">
               <ul>
@@ -84,6 +84,9 @@ ul {
   background-color: #2b324e;
   margin: -16px 0px 4px 6px;
 }
+.el-tabs__item:last-child .title span {
+  display: none;
+}
 .dot {
   width: 5px;
   height: 5px;

src/layout/altai/more/listRight.vue

@@ -0,0 +1,98 @@
+<template>
+  <div id="listRight">
+    <el-row>
+      <el-col :span="24" class="top">
+        <el-col :span="24" class="title">{{title1}}</el-col>
+      </el-col>
+      <el-col :span="24" class="content">
+        <ul>
+          <li v-for="(item,index) in listRight" :key="index">
+            <a href="#/detail">
+              <span class="dot"></span>
+              <span>{{item.title}}</span>
+              <span class="tt">{{item.time}}</span>
+            </a>
+          </li>
+        </ul>
+      </el-col>
+      <el-col :span="24" class="page">
+        <el-pagination background layout="prev, pager, next" :total="1000">
+        </el-pagination>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'listRight',
+  props: {
+    listRight: null,
+    title1:null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+a {
+  text-decoration: none;
+}
+.top {
+  height: 60px;
+  line-height: 60px;
+}
+.top .title {
+  font-size: 22px;
+  color: #2c3350;
+  font-family: 微软雅黑;
+  font-weight: bold;
+  padding: 0 0 0 20px;
+}
+.content {
+  display: -webkit-box;
+  -webkit-line-clamp: 12;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+ul {
+  padding: 0;
+  margin: 8px 20px;
+}
+.dot {
+  width: 5px;
+  height: 5px;
+  background-color: #abaab8;
+  border-radius: 90px;
+  margin: 0 10px 6px 0;
+}
+li {
+  padding: 5px 0;
+  color: #95a3c0;
+  list-style-type: none;
+}
+li a {
+  font-size: 16px;
+  color: #60626e;
+}
+.tt {
+  color: #abaab8;
+  float: right;
+}
+a > span {
+  display: inline-block;
+  max-width: 600px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.page {
+  margin-top: 50px;
+  text-align: center;
+}
+</style>

src/layout/altai/more/tubiao.vue

@@ -0,0 +1,33 @@
+<template>
+  <div id="tubiao">
+    <el-row>
+      <el-col :span="24" class="content">
+        <el-col class="img" :span="4" v-for="(item,index) in tuBiao" :key="index">
+          <el-link :underline="false" href="#">
+            <el-image :src="item.url" style="width:131px;height:160px"></el-image>
+          </el-link>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'tubiao',
+  props: {
+    tuBiao: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.content{
+  margin-left: 20px;
+}
+</style>

src/layout/altai/train/dynamic.vue

@@ -1,11 +1,11 @@
 <template>
   <div id="dynamic">
-     <el-row>
+    <el-row>
       <el-col :span="24">
         <el-tabs type="border-card" style="height:400px">
           <el-tab-pane v-for="(item,index) in dynamicList" :key="index">
             <span slot="label" class="title">{{item.title}}
-              <!-- <span></span> -->
+              <span></span>
             </span>
             <el-col :span="24" class="content">
               <ul>
@@ -32,7 +32,7 @@
 export default {
   name: 'dynamic',
   props: {
-    dynamicList:null,
+    dynamicList: null,
   },
   components: {},
   data: () => ({}),
@@ -64,11 +64,11 @@ ul {
 /deep/.el-tabs__nav-wrap.is-scrollable {
   padding: 0;
 }
-/deep/.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
-    color: #2c3350;
+/deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
+  color: #2c3350;
 }
-/deep/.el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover {
-   color: #2c3350;
+/deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-disabled):hover {
+  color: #2c3350;
 }
 .title {
   height: 45px;
@@ -84,6 +84,9 @@ ul {
   background-color: #2b324e;
   margin: -16px 0px 4px 6px;
 }
+.el-tabs__item:last-child .title span {
+  display: none;
+}
 .dot {
   width: 5px;
   height: 5px;
@@ -95,7 +98,7 @@ ul {
   height: 177px;
   display: -webkit-box;
   text-overflow: ellipsis;
-  overflow : hidden;
+  overflow: hidden;
   -webkit-box-orient: vertical;
 }
 .content li {

src/views/altai/detail.vue

@@ -0,0 +1,101 @@
+<template>
+  <div id="detail">
+    <el-row>
+      <div class="w_1200">
+        <el-col :span="24" class="top">
+          <top :foot="foot"></top>
+        </el-col>
+        <el-col :span="24" class="nav">
+          <native></native>
+        </el-col>
+        <el-col :span="24" class="main">
+          <el-col :span="4" class="mainLeft">
+            <biaoqian :biaoQian="biaoQian"></biaoqian>
+            <el-col :span="24" class="diaocha">
+              <diaocha></diaocha>
+            </el-col>
+          </el-col>
+          <el-col :span="19" class="mainRight">
+            <mainRight :mainRight="mainRight"></mainRight>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="foot">
+          <foot :foot="foot"></foot>
+        </el-col>
+      </div>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import top from '../../layout/altai/index/top.vue';
+import native from '../../layout/altai/index/native.vue';
+import biaoqian from '../../layout/altai/detail/biaoqian.vue';
+import diaocha from '../../layout/altai/detail/diaocha.vue';
+import mainRight from '../../layout/altai/detail/mainRight.vue';
+import foot from '../../layout/altai/index/foot.vue';
+export default {
+  name: 'detail',
+  props: {
+    biaoQian: null,
+    mainRight:null,
+    foot: null,//头部信息+底部信息
+  },
+  components: {
+    top,//头部
+    native,//导航
+    biaoqian,
+    diaocha,
+    mainRight,//右侧信息
+    foot,
+  },
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+.top {
+  background-color: rgba(0, 0, 0, 0);
+  height: 100px;
+  overflow: hidden;
+  color: #f2f5fa;
+}
+.nav {
+  height: 50px;
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, 0);
+}
+.main {
+  margin: 10px 0 0 0;
+}
+.mainLeft {
+  width: 240px;
+}
+.diaocha {
+  height: 433px;
+  background-color: #ffffff;
+  margin: 10px 0 0 0;
+  font-size: 22px;
+  text-align: center;
+}
+.mainRight {
+  min-height: 807px;
+  background-color: #ffffff;
+  margin: 0 0 0 10px;
+  text-align: center;
+}
+.foot {
+  overflow: hidden;
+  margin-top: 10px;
+  height: 120px;
+  color: #858f9b;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+</style>

src/views/altai/more.vue

@@ -0,0 +1,114 @@
+<template>
+  <div id="more">
+    <el-row>
+      <div class="w_1200">
+        <el-col :span="24" class="top">
+          <top :foot="foot"></top>
+        </el-col>
+        <el-col :span="24" class="nav">
+          <native></native>
+        </el-col>
+        <el-col :span="24" class="main">
+          <el-col :span="4" class="mainLeft">
+            <biaoqian :biaoQian="biaoQian"></biaoqian>
+            <el-col :span="24" class="diaocha">
+              <diaocha></diaocha>
+            </el-col>
+          </el-col>
+          <el-col :span="19" class="listRight">
+            <listRight :title1="title1" :listRight="listRight"></listRight>
+          </el-col>
+          <el-col :span="19" class="tubiao">
+            <tubiao :tuBiao="tuBiao"></tubiao>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="foot">
+          <foot :foot="foot"></foot>
+        </el-col>
+      </div>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import top from '../../layout/altai/index/top.vue';
+import native from '../../layout/altai/index/native.vue';
+import biaoqian from '../../layout/altai/detail/biaoqian.vue';
+import diaocha from '../../layout/altai/detail/diaocha.vue';
+import listRight from '../../layout/altai/more/listRight.vue';
+import tubiao from '../../layout/altai/more/tubiao.vue';
+import foot from '../../layout/altai/index/foot.vue';
+export default {
+  name: 'more',
+  props: {
+    biaoQian: null,
+    title1:null,
+    listRight:null,
+    tuBiao:null,
+    foot: null,//头部信息+底部信息
+  },
+  components: {
+    top,//头部
+    native,//导航
+    biaoqian,//标签
+    diaocha,//网上调查
+    listRight,//右侧列表
+    tubiao,//图标链接
+    foot,
+  },
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+.top {
+  background-color: rgba(0, 0, 0, 0);
+  height: 100px;
+  overflow: hidden;
+  color: #f2f5fa;
+}
+.nav {
+  height: 50px;
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, 0);
+}
+.main {
+  margin: 10px 0 0 0;
+}
+.mainLeft {
+  width: 240px;
+}
+.diaocha {
+  height: 433px;
+  background-color: #ffffff;
+  margin: 10px 0 0 0;
+  font-size: 22px;
+  text-align: center;
+}
+.listRight {
+  width: 950px;
+  height: 616px;
+  background-color: #ffffff;
+  margin: 0 0 0 10px;
+}
+.tubiao {
+  width: 950px;
+  height: 180px;
+  background-color: #ffffff;
+  margin: 10px 0 0 10px;
+}
+.foot {
+  overflow: hidden;
+  margin-top: 10px;
+  height: 120px;
+  color: #858f9b;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+</style>

src/views/altai/service.vue

@@ -24,7 +24,7 @@
               </el-col>
             </el-col>
             <el-col :span="24" class="link">
-              友情链接
+              <lianjie :linkList="linkList"></lianjie>
             </el-col>
           </el-col>
           <el-col :span="24" class="foot">
@@ -39,19 +39,22 @@
 <script>
 import top from '../../layout/altai/index/top.vue';
 import native from '../../layout/altai/index/native.vue';
+import lianjie from '../../layout/altai/index/lianjie.vue';
 import foot from '../../layout/altai/index/foot.vue';
 export default {
   name: 'service',
   props: {
+    linkList: null,//友情链接
     foot: null,
   },
   components: {
     top, //头部
     native, //导航
+    lianjie,//链接
     foot, //底部
   },
   data: () => ({}),
-  created() {},
+  created() { },
   computed: {},
   methods: {},
 };
@@ -100,7 +103,7 @@ export default {
   height: 100px;
   overflow: hidden;
   margin-top: 10px;
-  border: 1px solid #ccc;
+  background-color: #ffffff;
 }
 .foot {
   overflow: hidden;