网站

src/plugins/components.js

@@ -5,6 +5,7 @@ import cDialog from '@common/src/components/frame/c-dialog.vue';
 import cUpload from '@common/src/components/frame/c-upload.vue';
 import cSearch from '@common/src/components/frame/c-search.vue';
 import cButton from '@common/src/components/frame/c-button.vue';
+import cPage from '@common/src/components/frame/c-page.vue';
 
 const Plugin = (vue) => {
   vue.component('data-table', dataTable);
@@ -13,6 +14,7 @@ const Plugin = (vue) => {
   vue.component('cUpload', cUpload);
   vue.component('cSearch', cSearch);
   vue.component('cButton', cButton);
+  vue.component('cPage', cPage);
 };
 
 Vue.use(Plugin);

src/store/index.js

@@ -1,14 +1,17 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
+import * as ustate from '@common/src/store/user/state';
+import * as umutations from '@common/src/store/user/mutations';
+// 管理员
 import admin from '@common/src/store/admin';
 import program from '@common/src/store/program';
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
-  state: {},
+  state: { ...ustate },
   getters: {},
-  mutations: {},
+  mutations: { ...umutations },
   actions: {},
   modules: { admin, program },
 });

src/views/news/index.vue

@@ -1,22 +1,118 @@
 <template>
   <div id="index">
     <el-row>
-      <el-col :span="24" class="main animate__animated animate__zoomInDown"> 解决方案 </el-col>
+      <el-col :span="24" class="main animate__animated animate__zoomInDown">
+        <el-col :span="24" class="zero one">
+          <el-col :span="16" class="one_1">
+            <el-carousel height="500px">
+              <el-carousel-item v-for="(item, index) in bannerList" :key="index">
+                <el-image class="image" :src="item.url"></el-image>
+              </el-carousel-item>
+            </el-carousel>
+          </el-col>
+          <el-col :span="8" class="one_2">
+            <el-col :span="24" class="newsList" v-for="(item, index) in newsList" :key="index">
+              <el-col :span="24" class="title textOver">{{ item.title }}</el-col>
+              <el-col :span="24" class="date">{{ item.date }}</el-col>
+              <el-col :span="24" class="brief">{{ item.brief }}</el-col>
+            </el-col>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="zero two">
+          <el-col :span="24" class="common_1">
+            <span>新闻资讯</span>
+            <span></span>
+            <span></span>
+          </el-col>
+          <el-col :span="24" class="two_1">
+            <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+              <el-col :span="2" class="date">
+                <p>
+                  <span>{{ getDate(item.date, 'day') }}</span>
+                  <span>{{ getDate(item.date, 'year') }}</span>
+                </p>
+              </el-col>
+              <el-col :span="2" class="info">
+                <el-col :span="24" class="title">{{ item.name }}</el-col>
+                <el-col :span="24" class="brief">{{ item.path || '暂无' }}</el-col>
+              </el-col>
+            </el-col>
+            <el-col :span="24" class="page">
+              <c-page :total="total" :limit="limit" @query="search"></c-page>
+            </el-col>
+          </el-col>
+        </el-col>
+      </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions } = createNamespacedHelpers('program');
+const moment = require('moment');
+
 export default {
   name: 'index',
   props: {},
   components: {},
   data: function () {
-    return {};
+    return {
+      // 轮播图
+      bannerList: [{ url: require('@a/news_1.jpg') }],
+      // 新闻
+      newsList: [
+        {
+          title: '软件定义一切 下一个数据中心模式？',
+          date: '2023-02-02',
+          brief: '虚拟化在数据中心的应用意味着软件定义计算逐渐成为主流，而在软件定义计算的成功摸下下，软件定义存储也迅速获得市场的认.',
+        },
+        {
+          title: '软件定义一切 下一个数据中心模式？',
+          date: '2023-02-02',
+          brief: '虚拟化在数据中心的应用意味着软件定义计算逐渐成为主流，而在软件定义计算的成功摸下下，软件定义存储也迅速获得市场的认.',
+        },
+        {
+          title: '软件定义一切 下一个数据中心模式？',
+          date: '2023-02-02',
+          brief: '虚拟化在数据中心的应用意味着软件定义计算逐渐成为主流，而在软件定义计算的成功摸下下，软件定义存储也迅速获得市场的认.',
+        },
+        {
+          title: '软件定义一切 下一个数据中心模式？',
+          date: '2023-02-02',
+          brief: '虚拟化在数据中心的应用意味着软件定义计算逐渐成为主流，而在软件定义计算的成功摸下下，软件定义存储也迅速获得市场的认.',
+        },
+      ],
+      list: [],
+      total: 0,
+      limit: 6,
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    ...mapActions(['query']),
+    async search({ skip = 0, limit = this.limit, ...info } = {}) {
+      let res = await this.query({ skip, limit, ...info });
+      if (this.$checkRes(res)) {
+        this.$set(this, `list`, res.data);
+        this.$set(this, `total`, res.total);
+      }
+    },
+    // 整理时间
+    getDate(e, type) {
+      if (type == 'day') {
+        let day = moment(e).format('DD');
+        if (day) return day;
+        else '暂无';
+      } else if (type == 'year') {
+        let year = moment(e).format('YYYY/MM');
+        if (year) return year;
+        else '暂无';
+      }
+    },
   },
-  created() {},
-  methods: {},
   computed: {
     ...mapState(['user']),
   },
@@ -33,4 +129,130 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.main {
+  .zero {
+    margin: 0 0 2vw 0;
+    .common_1 {
+      margin: 0 0 20px 0;
+      span:nth-child(1) {
+        color: #ffc001;
+        font-size: 18px;
+      }
+      span:nth-child(2) {
+        display: inline-block;
+        width: 8px;
+        height: 10px;
+        background-color: #ffc001;
+        margin: 0 10px;
+      }
+      span:nth-child(3) {
+        display: inline-block;
+        width: 91%;
+        height: 10px;
+        background-color: #f1f1f1;
+      }
+    }
+  }
+  .one {
+    .one_1 {
+      .image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .one_2 {
+      padding: 0 10px;
+      .newsList {
+        margin: 0 0 20px 0;
+        padding: 0 0 20px 0;
+        border-bottom: 1px dashed #353535;
+        .title {
+          font-size: 20px;
+          margin: 0 0 5px 0;
+          font-weight: bold;
+          font-family: cursive;
+        }
+        .date {
+          font-size: 14px;
+          margin: 0 0 5px 0;
+        }
+        .brief {
+          font-size: 14px;
+          color: #7e7e7e;
+          line-height: 1.5;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          -webkit-line-clamp: 2;
+          word-break: break-all;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+        }
+      }
+      .newsList:last-child {
+        border-bottom: none;
+        margin: 0;
+        padding: 0;
+      }
+      .newsList:hover {
+        cursor: pointer;
+        .title {
+          color: #ffc001;
+        }
+        .date {
+          color: #ffc001;
+        }
+      }
+    }
+  }
+  .two {
+    .two_1 {
+      .list {
+        border-bottom: 1px solid #f1f1f1;
+        padding: 0 0 20px 0;
+        margin: 0 0 10px 0;
+        .date {
+          p {
+            background-color: #f2f2f2;
+            padding: 10px;
+            text-align: center;
+            span {
+              display: inline-block;
+              font-size: 14px;
+              color: #747474;
+            }
+            span:nth-child(1) {
+              font-size: 25px;
+            }
+          }
+        }
+        .info {
+          padding: 0 0 0 10px;
+          .title {
+            font-size: 18px;
+            margin: 0 0 5px 0;
+          }
+          .brief {
+            font-size: 14px;
+            color: #747474;
+          }
+        }
+      }
+      .list:last-child {
+        border-bottom: none;
+      }
+      .list:hover {
+        cursor: pointer;
+        .info {
+          .title {
+            color: #ffc001;
+          }
+        }
+      }
+      .page {
+        text-align: center;
+      }
+    }
+  }
+}
+</style>

vue.config.js

@@ -22,7 +22,7 @@ module.exports = {
         target: 'http://broadcast.waityou24.cn',
       },
       '/projectadmin/api': {
-        target: 'http://www.freeskyghw.cn', //http://127.0.0.1:10102  http://www.freeskyghw.cn
+        target: 'http://47.93.34.200', //http://127.0.0.1:10102  http://www.freeskyghw.cn
         changeOrigin: true,
         ws: false,
       },