瀏覽代碼

新闻资讯更新

guhongwei 5 年之前
父節點
當前提交
f65e1fa170
共有 5 個文件被更改,包括 473 次插入0 次删除
  1. 157 0
      src/layout/news/moreList.vue
  2. 28 0
      src/layout/news/newsLeft.vue
  3. 137 0
      src/layout/news/newsRight.vue
  4. 80 0
      src/views/news/list.vue
  5. 71 0
      src/views/news/moreList.vue

+ 157 - 0
src/layout/news/moreList.vue

@@ -0,0 +1,157 @@
+<template>
+  <div id="newsRight">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="top">
+          <el-breadcrumb separator-class="el-icon-arrow-right">
+            <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-home"></i>网站首页</el-breadcrumb-item>
+            <!-- <el-breadcrumb-item>导航一</el-breadcrumb-item> -->
+            <el-breadcrumb-item>数据列表</el-breadcrumb-item>
+          </el-breadcrumb>
+        </el-col>
+        <el-col :span="24" class="search">
+          <div>
+            <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
+              <el-button slot="append" icon="el-icon-search"></el-button>
+            </el-input>
+          </div>
+        </el-col>
+        <el-col :span="24" class="list">
+          <el-col :span="24" class="mainRightList" v-for="(item, index) in newsList" :key="index" :type="item.type">
+            <el-col :span="8" class="image">
+              <el-image style="width:340px;height:250px;" :src="item.pic"></el-image>
+            </el-col>
+            <el-col :span="16">
+              <el-col :span="24" class="title" @click.native="$router.push({ name: 'detail', params:{id:item.id} })">
+                <p class="textOver">{{item.title}}</p>
+              </el-col>
+              <el-col :span="24" class="time">
+                <p>{{item.publish_time}}</p>
+              </el-col>
+              <el-col :span="24" class="content">
+                <p>{{item.content}}</p>
+              </el-col>
+              <el-col :span="24" class="button">
+                <el-button type="primary" @click.native="$router.push({ name: 'detail', params:{id:item.id} })">进入
+                </el-button>
+              </el-col>
+            </el-col>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="page">
+          <div class="block">
+            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                           :current-page="currentPage" layout="total,prev, pager, next, jumper" :total="total">
+            </el-pagination>
+          </div>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'newsRight',
+  props: {
+    newsList: null,
+    total: null,
+  },
+  components: {},
+  data: () => ({
+    input3: '',
+    currentPage: 1,
+  }),
+  created() { },
+  computed: {},
+  methods: {
+    handleSizeChange(val) {
+      // eslint-disable-next-line no-console
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      // eslint-disable-next-line no-console
+      console.log(`当前页: ${val}`);
+    }
+  },
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  margin: 0;
+  padding: 0;
+}
+.textOver {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.main {
+  min-height: 500px;
+  margin: 20px 0;
+  background-color: rgba(255, 255, 255, 0.8);
+}
+.top {
+  margin: 10px 0 0 20px;
+}
+.search {
+  margin: 20px 0;
+  padding: 0 20px;
+}
+/deep/.el-input-group {
+  width: 40%;
+}
+/deep/.el-input__inner {
+  border: 1px solid #336699;
+}
+/deep/.el-input-group__append {
+  border: 1px solid #336699;
+  background-color: #336699;
+  color: #fff;
+}
+.list {
+  padding: 0 20px;
+}
+.mainRightList {
+  padding: 20px;
+  margin: 0 0 20px 0;
+  border: 1px dashed #000;
+}
+.mainRightList:hover .title {
+  cursor: pointer;
+  color: #336699;
+}
+.mainRightList .title {
+  font-size: 30px;
+  padding: 0 0 5px 0;
+}
+.mainRightList .time {
+  font-size: 20px;
+  color: #999;
+  padding: 0 0 5px 0;
+}
+.mainRightList .content p {
+  text-indent: 2rem;
+  font-size: 18px;
+  line-height: 25px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 5;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+.mainRightList .button {
+  text-align: right;
+  padding: 8px 25px;
+}
+/deep/.el-button {
+  padding: 10px;
+}
+.page {
+  padding: 0 20px;
+  text-align: center;
+  margin: 0 0 20px 0;
+}
+</style>

+ 28 - 0
src/layout/news/newsLeft.vue

@@ -0,0 +1,28 @@
+<template>
+  <div id="newsLeft">
+    <el-row>
+      <el-col :span="24" class="main">
+        网上调查
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'newsLeft',
+  props: {},
+  components: {},
+  data: () => ({}),
+  created() { },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  min-height: 500px;
+  background-color: rgba(255, 255, 255, 0.8);
+}
+</style>

+ 137 - 0
src/layout/news/newsRight.vue

@@ -0,0 +1,137 @@
+<template>
+  <div id="newsRight">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="top">
+          <el-breadcrumb separator-class="el-icon-arrow-right">
+            <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-home"></i>网站首页</el-breadcrumb-item>
+            <el-breadcrumb-item>导航一</el-breadcrumb-item>
+            <el-breadcrumb-item>数据列表</el-breadcrumb-item>
+          </el-breadcrumb>
+        </el-col>
+        <el-col :span="24" class="search">
+          <div>
+            <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
+              <el-button slot="append" icon="el-icon-search"></el-button>
+            </el-input>
+          </div>
+        </el-col>
+        <el-col :span="24" class="list">
+          <el-col :span="24" class="mainRightList" v-for="(item, index) in newsRightList" :key="index"
+                  :type="item.type">
+            <el-col :span="24" class="twoTitle">
+              <el-col :span="21" class="title">
+                <p class="textOver">{{ item.title }}</p>
+              </el-col>
+              <el-col :span="3" class="more">
+                <!-- @click="$router.push({ path: `moreList/${newsRightList[0].id}` })" -->
+                <el-link :underline="false" @click="$router.push({ path: '/lists/moreList' })">more</el-link>
+              </el-col>
+            </el-col>
+            <el-col :span="24" class="children" v-for="(tag, index) in item.children" :key="index">
+              <el-col :span="20" class="title" @click.native="$router.push({ name: 'detail', params:{id:tag.id} })">
+                <p class="textOver">{{ tag.title }}</p>
+              </el-col>
+              <el-col :span="4" class="time">
+                {{tag.publish_time}}
+              </el-col>
+            </el-col>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'newsRight',
+  props: {
+    newsRightList: null,
+  },
+  components: {},
+  data: () => ({
+    input3: '',
+    currentPage: 1,
+  }),
+  created() { },
+  computed: {},
+  methods: {
+    handleSizeChange(val) {
+      // eslint-disable-next-line no-console
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      // eslint-disable-next-line no-console
+      console.log(`当前页: ${val}`);
+    }
+  },
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  margin: 0;
+  padding: 0;
+}
+.textOver {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.main {
+  width: 880px;
+  min-height: 500px;
+  margin: 0 0 0 20px;
+  background-color: rgba(255, 255, 255, 0.8);
+}
+.top {
+  margin: 10px 0 0 20px;
+}
+.search {
+  margin: 20px 0;
+  padding: 0 20px;
+}
+/deep/.el-input-group {
+  width: 40%;
+}
+/deep/.el-input__inner {
+  border: 1px solid #336699;
+}
+/deep/.el-input-group__append {
+  border: 1px solid #336699;
+  background-color: #336699;
+  color: #fff;
+}
+.list {
+  padding: 0 20px;
+}
+.twoTitle {
+  padding: 10px 0;
+}
+.twoTitle .title {
+  font-size: 25px;
+  font-weight: bold;
+}
+.twoTitle .more .el-link {
+  font-size: 18px;
+  color: #336699;
+  text-transform: uppercase;
+}
+.children {
+  padding: 8px 10px;
+  border-bottom: 1px dashed #000;
+}
+.children:hover .title {
+  color: #336699;
+  cursor: pointer;
+}
+.children .title {
+  font-size: 18px;
+}
+.children .time {
+  font-size: 18px;
+  text-align: center;
+  color: red;
+}
+</style>

+ 80 - 0
src/views/news/list.vue

@@ -0,0 +1,80 @@
+<template>
+  <div id="list">
+    <el-row style="overflow-y: hidden;">
+      <el-col :span="24" class="top">
+        <div class="w_1200">
+          <top :topInfo="topInfo" :topInfos="topInfos"></top>
+        </div>
+      </el-col>
+      <el-col :span="24" class="menu">
+        <div class="w_1200">
+          <native></native>
+        </div>
+      </el-col>
+      <el-col :span="24" class="main">
+        <div class="w_1200">
+          <el-col :span="6">
+            <newsLeft></newsLeft>
+          </el-col>
+          <el-col :span="18">
+            <newsRight :newsRightList="newsRightList" :total="total" v-if="!type"></newsRight>
+            <noLeft v-else :newsRightList="newsRightList"></noLeft>
+          </el-col>
+        </div>
+      </el-col>
+      <el-col :span="24" class="down">
+        <footinfo :topInfo="topInfo"></footinfo>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import top from '../../layout/index/top.vue';
+import native from '../../layout/index/native.vue';
+import newsRight from '../../layout/news/newsRight.vue';
+import newsLeft from '../../layout/news/newsLeft.vue';
+import footinfo from '../../layout/index/foot.vue';
+export default {
+  name: 'list',
+  props: {
+    topInfos: null,//头部
+    topInfo: null,//网络头部
+    newsRightList: null,//新闻右侧列表
+    total: null,
+    type: { type: Boolean, default: false }
+  },
+  components: {
+    top,//头部
+    native,//导航
+    newsLeft,//新闻左侧
+    newsRight,//新闻右侧
+    footinfo,//底部信息
+  },
+  data: () => ({}),
+  created() { },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+.top {
+  height: 150px;
+}
+.menu {
+  height: 60px;
+}
+.down {
+  min-height: 100px;
+}
+.main {
+  min-height: 500px;
+  margin: 20px 0;
+}
+</style>
+

+ 71 - 0
src/views/news/moreList.vue

@@ -0,0 +1,71 @@
+<template>
+  <div id="list">
+    <el-row style="overflow-y: hidden;">
+      <el-col :span="24" class="top">
+        <div class="w_1200">
+          <top :topInfo="topInfo" :topInfos="topInfos"></top>
+        </div>
+      </el-col>
+      <el-col :span="24" class="menu">
+        <div class="w_1200">
+          <native></native>
+        </div>
+      </el-col>
+      <el-col :span="24" class="main">
+        <div class="w_1200">
+          <moreList :newsList="newsList"></moreList>
+        </div>
+      </el-col>
+      <el-col :span="24" class="down">
+        <footinfo :topInfo="topInfo"></footinfo>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import top from '../../layout/index/top.vue';
+import native from '../../layout/index/native.vue';
+import moreList from '../../layout/news/moreList.vue';
+import footinfo from '../../layout/index/foot.vue';
+export default {
+  name: 'list',
+  props: {
+    topInfos: null,//头部
+    topInfo: null,//数据头部
+    newsList:null,//新闻列表
+    type: { type: Boolean, default: false }
+  },
+  components: {
+    top,
+    native,
+    moreList,
+    footinfo,
+  },
+  data: () => ({}),
+  created() { },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+.top {
+  height: 150px;
+}
+.menu {
+  height: 60px;
+}
+.main {
+  width: 100%;
+  min-height: 500px;
+}
+.down {
+  min-height: 100px;
+}
+</style>
+