|
|
@@ -1,11 +1,64 @@
|
|
|
<template>
|
|
|
<div id="homeIndex">
|
|
|
<el-row>
|
|
|
- <el-col :span="24" class="main animate__animated animate__backInRight">
|
|
|
- <el-col :span="24" class="one">
|
|
|
- <el-col :span="24" class="one_1">个人网站</el-col>
|
|
|
- <el-col :span="24" class="one_2">
|
|
|
- <el-button type="primary" size="small" @click="toLogin()">用户登录</el-button>
|
|
|
+ <el-col :span="24" class="main animate__animated animate__rotateIn">
|
|
|
+ <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="6" class="twoList" v-for="(item, index) in twoList" :key="index">
|
|
|
+ <el-col :span="24" class="title">{{ item.title }}</el-col>
|
|
|
+ <el-col :span="24" class="brief">{{ item.brief }}</el-col>
|
|
|
+ <el-col :span="24" class="image">
|
|
|
+ <el-image :src="item.url"></el-image>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="zero thr">
|
|
|
+ <el-image :src="thr_url"></el-image>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="zero four">
|
|
|
+ <el-col :span="14" class="four_1">
|
|
|
+ <el-col :span="24" class="four_1_1">
|
|
|
+ <span
|
|
|
+ :class="['typeList', type_active == index ? 'typeActive' : '']"
|
|
|
+ v-for="(item, index) in typeList"
|
|
|
+ :key="index"
|
|
|
+ @mouseenter="typeEnter(item, index)"
|
|
|
+ >{{ item.title }}</span
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="four_1_2">
|
|
|
+ <el-col :span="24" class="four1List" v-for="(item, index) in four1List" :key="index">
|
|
|
+ <el-col :span="4" class="date">
|
|
|
+ <el-col :span="24" class="date_1">{{ getDate(item.date, 'day') }}</el-col>
|
|
|
+ <el-col :span="24" class="date_2">{{ getDate(item.date, 'year') }}</el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="20" class="info">
|
|
|
+ <el-col :span="24" class="title">{{ item.title }}</el-col>
|
|
|
+ <el-col :span="24" class="brief">{{ item.brief }}</el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10" class="four_2">
|
|
|
+ <el-col :span="24" class="four2List" v-for="(item, index) in four2List" :key="index">
|
|
|
+ <el-image class="image" :src="item.url"></el-image>
|
|
|
+ <el-col :span="24" class="title">{{ item.title }}</el-col>
|
|
|
+ </el-col>
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
@@ -15,17 +68,121 @@
|
|
|
|
|
|
<script>
|
|
|
import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
+const moment = require('moment');
|
|
|
export default {
|
|
|
name: 'homeIndex',
|
|
|
props: {},
|
|
|
components: {},
|
|
|
data: function () {
|
|
|
- return {};
|
|
|
+ return {
|
|
|
+ // 轮播图
|
|
|
+ bannerList: [{ url: require('@a/photo_1.jpg') }, { url: require('@a/photo_2.jpg') }, { url: require('@a/photo_3.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: '作为网购整个流程中的重要一环，快递的作用可想而知，作为网购整个流程中的重要一环，快递的作用可想而知，',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ // 第二部分
|
|
|
+ twoList: [
|
|
|
+ {
|
|
|
+ title: '商业模式开发',
|
|
|
+ brief: '我们拥有专业的企业管理专家、咨询师，我们专为传统企业转型生活提供解决方案',
|
|
|
+ url: require('@a/two_1.png'),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '电子商务平台',
|
|
|
+ brief: '我们拥有专业的企业管理专家、咨询师，我们专为传统企业转型生活提供解决方案',
|
|
|
+ url: require('@a/two_2.png'),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '电子商务平台',
|
|
|
+ brief: '我们拥有专业的企业管理专家、咨询师，我们专为传统企业转型生活提供解决方案',
|
|
|
+ url: require('@a/two_3.png'),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '系统开发与集成',
|
|
|
+ brief: '我们拥有专业的企业管理专家、咨询师，我们专为传统企业转型生活提供解决方案',
|
|
|
+ url: require('@a/two_4.png'),
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ // 第三部分
|
|
|
+ thr_url: require('@a/thr_1.jpg'),
|
|
|
+ // 第四部分
|
|
|
+ typeList: [{ title: '新闻资讯' }, { title: '数据中心' }, { title: '行业动态' }],
|
|
|
+ type_active: '0',
|
|
|
+ four1List: [
|
|
|
+ {
|
|
|
+ title: '远程医疗软件系统平台开发解决方案分析！',
|
|
|
+ date: '2023-02-02',
|
|
|
+ brief:
|
|
|
+ '随着生活水平的提高，人们越来越关注自己的健康，都希望得到便捷和高质量的医疗保健服务。但由于医疗资源分布不均，不少地方医疗条件落后，医疗资源共享也不到位，致使病人难以获得完善的医疗服务。',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '远程医疗软件系统平台开发解决方案分析！',
|
|
|
+ date: '2023-02-02',
|
|
|
+ brief:
|
|
|
+ '随着生活水平的提高，人们越来越关注自己的健康，都希望得到便捷和高质量的医疗保健服务。但由于医疗资源分布不均，不少地方医疗条件落后，医疗资源共享也不到位，致使病人难以获得完善的医疗服务。',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '远程医疗软件系统平台开发解决方案分析！',
|
|
|
+ date: '2023-02-02',
|
|
|
+ brief:
|
|
|
+ '随着生活水平的提高，人们越来越关注自己的健康，都希望得到便捷和高质量的医疗保健服务。但由于医疗资源分布不均，不少地方医疗条件落后，医疗资源共享也不到位，致使病人难以获得完善的医疗服务。',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '远程医疗软件系统平台开发解决方案分析！',
|
|
|
+ date: '2023-02-02',
|
|
|
+ brief:
|
|
|
+ '随着生活水平的提高，人们越来越关注自己的健康，都希望得到便捷和高质量的医疗保健服务。但由于医疗资源分布不均，不少地方医疗条件落后，医疗资源共享也不到位，致使病人难以获得完善的医疗服务。',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ four2List: [
|
|
|
+ {
|
|
|
+ url: require('@a/four_1.jpg'),
|
|
|
+ title: '移动端APP开发定制',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: require('@a/four_2.jpg'),
|
|
|
+ title: '网站系统开发定制',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
},
|
|
|
created() {},
|
|
|
methods: {
|
|
|
- toLogin() {
|
|
|
- window.open(`${process.env.VUE_APP_HOST}/padmin`);
|
|
|
+ typeEnter(e, index) {
|
|
|
+ this.$set(this, `type_active`, index);
|
|
|
+ console.log(index);
|
|
|
+ },
|
|
|
+ // 整理时间
|
|
|
+ getDate(e, type) {
|
|
|
+ if (type == 'day') {
|
|
|
+ let day = moment(e).format('MM/DD');
|
|
|
+ if (day) return day;
|
|
|
+ else '暂无';
|
|
|
+ } else if (type == 'year') {
|
|
|
+ let year = moment(e).format('YYYY');
|
|
|
+ if (year) return year;
|
|
|
+ else '暂无';
|
|
|
+ }
|
|
|
},
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -46,19 +203,183 @@ export default {
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
.main {
|
|
|
- width: 100vw;
|
|
|
- height: 100vh;
|
|
|
- background: url('~@a/bj.jpg');
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
+ .zero {
|
|
|
+ margin: 0 0 2vw 0;
|
|
|
+ }
|
|
|
.one {
|
|
|
- text-align: center;
|
|
|
.one_1 {
|
|
|
- font-size: 40px;
|
|
|
- font-family: cursive;
|
|
|
- font-weight: bold;
|
|
|
- margin: 2vw 0;
|
|
|
- color: #ffffff;
|
|
|
+ .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 {
|
|
|
+ .twoList {
|
|
|
+ margin: 0 15px 0 0;
|
|
|
+ border: 1px solid #f1f1f1;
|
|
|
+ width: 24%;
|
|
|
+ height: 340px;
|
|
|
+ padding: 10px;
|
|
|
+ text-align: center;
|
|
|
+ .title {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin: 1vw 0 1.5vw 0;
|
|
|
+ }
|
|
|
+ .brief {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #7e7e7e;
|
|
|
+ margin: 0 0 2vw 0;
|
|
|
+ padding: 0 16px;
|
|
|
+ line-height: 2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .twoList:last-child {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ .twoList:nth-child(1) {
|
|
|
+ border-top: 1px solid #ffc001;
|
|
|
+ }
|
|
|
+ .twoList:nth-child(2) {
|
|
|
+ border-top: 1px solid #ffb6c1;
|
|
|
+ }
|
|
|
+ .twoList:nth-child(3) {
|
|
|
+ border-top: 1px solid #0000ff;
|
|
|
+ }
|
|
|
+ .twoList:nth-child(4) {
|
|
|
+ border-top: 1px solid #ff0000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .four {
|
|
|
+ .four_1 {
|
|
|
+ .four_1_1 {
|
|
|
+ margin: 0 0 1vw 0;
|
|
|
+ .typeList {
|
|
|
+ display: inline-block;
|
|
|
+ margin: 0 10px 0 0;
|
|
|
+ width: 130px;
|
|
|
+ text-align: center;
|
|
|
+ padding: 10px 0;
|
|
|
+ color: #7e7e7e;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .typeList:hover {
|
|
|
+ background-color: #ffc001;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ .typeActive {
|
|
|
+ background-color: #ffc001;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .four_1_2 {
|
|
|
+ padding: 0 10px 0 0;
|
|
|
+ .four1List {
|
|
|
+ border-bottom: 1px dashed #f1f1f1;
|
|
|
+ padding: 10px 0 15px 0;
|
|
|
+ margin: 0 0 13px 0;
|
|
|
+ .date {
|
|
|
+ .date_1 {
|
|
|
+ font-size: 30px;
|
|
|
+ color: #666666;
|
|
|
+ font-family: math;
|
|
|
+ }
|
|
|
+ .date_2 {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #7e7e7e;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info {
|
|
|
+ .title {
|
|
|
+ font-size: 18px;
|
|
|
+ margin: 0 0 5px 0;
|
|
|
+ }
|
|
|
+ .brief {
|
|
|
+ line-height: 1.5;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #747474;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .four1List:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ .four1List:hover {
|
|
|
+ .info {
|
|
|
+ .title {
|
|
|
+ color: #ffc001;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .four_2 {
|
|
|
+ .four2List {
|
|
|
+ position: relative;
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ height: 280px;
|
|
|
+ overflow: hidden;
|
|
|
+ .image {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ background-color: #0000005f;
|
|
|
+ color: #ffffff;
|
|
|
+ text-align: center;
|
|
|
+ padding: 6px 0;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .four2List:last-child {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
