|
@@ -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>
|