|
@@ -2,39 +2,29 @@
|
|
|
<div class="home">
|
|
|
<div class="company">
|
|
|
<div class="company-left">
|
|
|
- <div class="title-box">
|
|
|
- <item-title title="公司介绍" :topath="'/publicity'"></item-title>
|
|
|
+ <item-title title="公司介绍" :topath="'/publicity'"></item-title>
|
|
|
+ <div class="font">
|
|
|
+ 台州市添利节能科技有限公司是专注于电镀行业节能减排尖端设备研发和 技术服务的企业,多年来为国内多家电镀企业进行技术改造,截止2021年1月
|
|
|
+ 累计节水量达到200多万吨,节水经济效益1.17亿元,平均节水效率45%。
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="company-right">
|
|
|
- <img src="" >
|
|
|
- </div>
|
|
|
+ <div class="company-right"><img src="" /></div>
|
|
|
</div>
|
|
|
<div class="home-body">
|
|
|
- <div class="news-wrapper">
|
|
|
- <div class="new-pic" @click="navTo('/news/detail?id=' + showNew.id)">
|
|
|
- <img :src="showNew.img" />
|
|
|
- <div class="title clamp hand">{{ showNew.title }}</div>
|
|
|
- </div>
|
|
|
- <div class="body-left moren">
|
|
|
- <div class="red-new">
|
|
|
- <item-title title="案例展示" :topath="'/publicity'"></item-title>
|
|
|
- <div class="item-wrapper">
|
|
|
- <div class="new-item hand" v-for="item in openNews" :key="item.id" @click="navTo('/publicity/detail?id=' + item.id)">
|
|
|
- <div class="title clamp ">
|
|
|
- <span></span>
|
|
|
- {{ item.title }}
|
|
|
- </div>
|
|
|
- <div class="time">{{ item.release_time ? item.release_time : item.add_time | time }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="news">
|
|
|
- <item-title title="新闻动态" :topath="'/news'"></item-title>
|
|
|
+ <div class="new-pic">
|
|
|
+ <el-carousel :interval="4000" height="450px" indicator-position="none">
|
|
|
+ <el-carousel-item v-for="(item, index) in showNew" :key="index" class="new-pic" @click="navTo('/news/detail?id=' + showNew.id)">
|
|
|
+ <img :src="showNew.img"/>
|
|
|
+ <div class="title clamp hand">{{ showNew.title }}</div>
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
+ </div>
|
|
|
+ <div class="body-left moren">
|
|
|
+ <div class="red-new">
|
|
|
+ <item-title title="案例展示" :topath="'/publicity'"></item-title>
|
|
|
<div class="item-wrapper">
|
|
|
- <div class="new-item hand" v-for="item in redNews" :key="item.id" @click="navTo('/news/detail?id=' + item.id)">
|
|
|
- <div class="title clamp">
|
|
|
+ <div class="new-item hand" v-for="item in openNews" :key="item.id" @click="navTo('/publicity/detail?id=' + item.id)">
|
|
|
+ <div class="title clamp ">
|
|
|
<span></span>
|
|
|
{{ item.title }}
|
|
|
</div>
|
|
@@ -43,181 +33,96 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="news">
|
|
|
+ <item-title title="新闻动态" :topath="'/news'"></item-title>
|
|
|
+ <div class="item-wrapper">
|
|
|
+ <div class="new-item hand" v-for="item in redNews" :key="item.id" @click="navTo('/news/detail?id=' + item.id)">
|
|
|
+ <div class="title clamp">
|
|
|
+ <span></span>
|
|
|
+ {{ item.title }}
|
|
|
+ </div>
|
|
|
+ <div class="time">{{ item.release_time ? item.release_time : item.add_time | time }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import ItemTitle from './homeChild/ItemTitle.vue';
|
|
|
-
|
|
|
-import { loadIndexs, splist, loveList, friendList, newsList, openList, banner, regulationList } from '../request/api.js';
|
|
|
export default {
|
|
|
components: {
|
|
|
ItemTitle
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- // jxList: [],
|
|
|
- spList: [],
|
|
|
- imgList: [],
|
|
|
- friendList: [],
|
|
|
- redNews: [],
|
|
|
- openNews: [],
|
|
|
- regulationList: [],
|
|
|
- moreJxList: [],
|
|
|
- timer: null
|
|
|
+ openNews:[],
|
|
|
+ redNews:[],
|
|
|
+ showNew:[{},{}],
|
|
|
};
|
|
|
},
|
|
|
filters: {
|
|
|
- getTime(val) {
|
|
|
- let date = new Date(val * 1000);
|
|
|
- let Y = date.getFullYear();
|
|
|
- let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
|
|
|
- let D = date.getDate() < 10 ? '0' + date.getDay() : date.getDate();
|
|
|
- return Y + '.' + M + '.' + D;
|
|
|
- },
|
|
|
- time(val) {
|
|
|
- let arr = val.split(' ');
|
|
|
- let str = arr[0];
|
|
|
- str = str.replace(/-/g, '.');
|
|
|
- return str;
|
|
|
- }
|
|
|
+
|
|
|
},
|
|
|
computed: {
|
|
|
- jxList() {
|
|
|
- return this.moreJxList.slice(0, 3);
|
|
|
- },
|
|
|
- showNew() {
|
|
|
- let obj = this;
|
|
|
- if (obj.redNews[0]) {
|
|
|
- let data = {
|
|
|
- id: obj.redNews[0].id,
|
|
|
- img: obj.redNews[0].image_input[0],
|
|
|
- title: obj.redNews[0].title
|
|
|
- };
|
|
|
- return data;
|
|
|
- }
|
|
|
-
|
|
|
- return {};
|
|
|
- }
|
|
|
+
|
|
|
},
|
|
|
created() {
|
|
|
- this.getSwiperList();
|
|
|
- this.getIndex();
|
|
|
- this.getFirstAidList();
|
|
|
- this.getJxList();
|
|
|
- this.getNewsList();
|
|
|
- this.getOpenList(), this.getRegulationList();
|
|
|
+
|
|
|
},
|
|
|
methods: {
|
|
|
- navTo(url) {
|
|
|
- this.$router.push(url);
|
|
|
- },
|
|
|
- getIndex() {
|
|
|
- loadIndexs().then(({ data }) => {
|
|
|
- this.friendList = data.friend_link;
|
|
|
- this.imgList = data.picture_list;
|
|
|
- });
|
|
|
- },
|
|
|
- getFirstAidList() {
|
|
|
- splist({
|
|
|
- page: 1,
|
|
|
- limit: 5
|
|
|
- }).then(({ data }) => {
|
|
|
- this.spList = data.list;
|
|
|
- });
|
|
|
- },
|
|
|
- getJxList() {
|
|
|
- let obj = this;
|
|
|
- let data = {
|
|
|
- page: 1,
|
|
|
- limit: 20
|
|
|
- };
|
|
|
- loveList(data).then(res => {
|
|
|
- obj.moreJxList = res.data.list.map(item => {
|
|
|
- if (item.intention === '') {
|
|
|
- item.intention = '非定向捐款';
|
|
|
- }
|
|
|
- let date = new Date(item.add_time * 1000);
|
|
|
- let Y = date.getFullYear();
|
|
|
- let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
|
|
|
- let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
|
|
|
- item.time = Y + '/' + M + '/' + D;
|
|
|
- return item;
|
|
|
- });
|
|
|
- obj.gundong();
|
|
|
- });
|
|
|
- },
|
|
|
- gundong() {
|
|
|
- let obj = this;
|
|
|
- obj.timer = setTimeout(() => {
|
|
|
- obj.moreJxList.push(obj.moreJxList.shift());
|
|
|
- // console.log(obj.moreJxList)
|
|
|
- obj.gundong();
|
|
|
- }, 2000);
|
|
|
- },
|
|
|
- getNewsList() {
|
|
|
- let obj = this;
|
|
|
- newsList({
|
|
|
- page: 1,
|
|
|
- limit: 9
|
|
|
- }).then(res => {
|
|
|
- obj.redNews = res.data.list;
|
|
|
- });
|
|
|
- },
|
|
|
- getOpenList() {
|
|
|
- let obj = this;
|
|
|
- openList({
|
|
|
- page: 1,
|
|
|
- limit: 9
|
|
|
- }).then(res => {
|
|
|
- obj.openNews = res.data.list;
|
|
|
- // console.log(obj.openNews)
|
|
|
- });
|
|
|
- },
|
|
|
- getSwiperList() {
|
|
|
- let obj = this;
|
|
|
- banner().then(res => {
|
|
|
- let list = res.data.list.map(item => {
|
|
|
- return item.image_input[0];
|
|
|
- });
|
|
|
- obj.swiperList = list;
|
|
|
- });
|
|
|
- },
|
|
|
- getRegulationList() {
|
|
|
- let obj = this;
|
|
|
- regulationList({
|
|
|
- page: 1,
|
|
|
- limit: 6
|
|
|
- }).then(res => {
|
|
|
- obj.regulationList = res.data.list;
|
|
|
- });
|
|
|
- }
|
|
|
+
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" spcode>
|
|
|
-.news-wrapper {
|
|
|
- width: 1200px;
|
|
|
+.company {
|
|
|
+ max-width: 1920px;
|
|
|
+ min-width: 1080px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: start;
|
|
|
+ padding: 50px 75px 70px 50px;
|
|
|
+ .company-left {
|
|
|
+ padding-top: 20px;
|
|
|
+ max-width: 50%;
|
|
|
+ min-width: 25%;
|
|
|
+ height: 414px;
|
|
|
+ .font {
|
|
|
+ margin-top: 37px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Adobe Heiti Std;
|
|
|
+ font-weight: normal;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 50px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .company-right {
|
|
|
+ margin-left: 60px;
|
|
|
+ width: 50%;
|
|
|
+ height: 410px;
|
|
|
+ background: #55aaff;
|
|
|
+ }
|
|
|
+}
|
|
|
+.home-body {
|
|
|
+ max-width: 1920px;
|
|
|
+ min-width: 1080px;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
- margin: 24px auto;
|
|
|
+ padding-left: 30px;
|
|
|
.new-pic {
|
|
|
- width: 521px;
|
|
|
- height: 344px;
|
|
|
- // background-color: #ffff00;
|
|
|
+ width: 600px;
|
|
|
+ height: 450px;
|
|
|
position: relative;
|
|
|
img {
|
|
|
- width: 521px;
|
|
|
- height: 344px;
|
|
|
+ width: 600px;
|
|
|
+ height: 450px;
|
|
|
}
|
|
|
.title {
|
|
|
- width: 481px;
|
|
|
- height: 55px;
|
|
|
- padding-left: 20px;
|
|
|
- padding-right: 20px;
|
|
|
- background: #262626;
|
|
|
+ width: 600px;
|
|
|
+ height: 80px;
|
|
|
+ background: #D2D3D3;
|
|
|
opacity: 0.8;
|
|
|
line-height: 55px;
|
|
|
font-size: 24px;
|
|
@@ -229,223 +134,12 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.news {
|
|
|
- width: 659px;
|
|
|
- height: 344px;
|
|
|
+ width: 670px;
|
|
|
+ height: 340px;
|
|
|
background: #ffffff;
|
|
|
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
}
|
|
|
-.company {
|
|
|
- margin-top: 49px;
|
|
|
- width: 1980px;
|
|
|
- display: flex;
|
|
|
- justify-content: start;
|
|
|
- padding: 0 75px 72px 51px;
|
|
|
- .company-left{
|
|
|
- padding-top: 21px;
|
|
|
- width: 900px;
|
|
|
- height: 414px;
|
|
|
- }
|
|
|
- .company-right {
|
|
|
- width: 917px;
|
|
|
- height: 414px;
|
|
|
- background: #55aaff;
|
|
|
- }
|
|
|
-}
|
|
|
-.home-body {
|
|
|
- width: 1200px;
|
|
|
- margin: 24px auto;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- .body-left {
|
|
|
- .red-new {
|
|
|
- width: 588px;
|
|
|
- height: 344px;
|
|
|
- background: #ffffff;
|
|
|
- box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
|
|
|
- margin-bottom: 24px;
|
|
|
- // padding: 20px 15px 0 13px;
|
|
|
- }
|
|
|
- .new-open {
|
|
|
- // padding: 20px 15px 0 13px;
|
|
|
- width: 588px;
|
|
|
- height: 262px;
|
|
|
- background: #ffffff;
|
|
|
- box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
|
|
|
- }
|
|
|
- .item-wrapper {
|
|
|
- padding: 20px 15px 0 13px;
|
|
|
-
|
|
|
- .new-item {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 17px;
|
|
|
- &:hover {
|
|
|
- span {
|
|
|
- background: red;
|
|
|
- }
|
|
|
- .title {
|
|
|
- color: red;
|
|
|
- }
|
|
|
- .time {
|
|
|
- color: red;
|
|
|
- }
|
|
|
- }
|
|
|
- span {
|
|
|
- display: inline-block;
|
|
|
- width: 8px;
|
|
|
- height: 8px;
|
|
|
- background: #d8d8d8;
|
|
|
- // border-radius: 50%;
|
|
|
- transform: rotate(45deg);
|
|
|
- margin-right: 8px;
|
|
|
- }
|
|
|
- .title {
|
|
|
- width: 400px;
|
|
|
- height: 14px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #101010;
|
|
|
- &:hover {
|
|
|
- color: red;
|
|
|
- }
|
|
|
- }
|
|
|
- .time {
|
|
|
- font-size: 14px;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .body-right {
|
|
|
- .join {
|
|
|
- width: 588px;
|
|
|
- height: 344px;
|
|
|
- background: #ffffff;
|
|
|
- box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
|
|
|
- margin-bottom: 24px;
|
|
|
- .join-main {
|
|
|
- padding-left: 46px;
|
|
|
- padding-top: 15px;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- .join-item {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- margin-right: 28px;
|
|
|
- margin-bottom: 14px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #323131;
|
|
|
- line-height: 1;
|
|
|
- .logo {
|
|
|
- width: 103px;
|
|
|
- height: 103px;
|
|
|
- border: 1px solid #dadada;
|
|
|
- border-radius: 10px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- img {
|
|
|
- width: 50px;
|
|
|
- height: 50px;
|
|
|
- }
|
|
|
- }
|
|
|
- .title {
|
|
|
- padding-top: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .list {
|
|
|
- width: 588px;
|
|
|
- height: 262px;
|
|
|
- background: #ffffff;
|
|
|
- box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
|
|
|
- .is-leaf {
|
|
|
- font-size: 17px;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #d82020 !important;
|
|
|
- text-align: center;
|
|
|
- // line-height: 54px;
|
|
|
- height: 54px;
|
|
|
- }
|
|
|
- .el-table__row > td {
|
|
|
- font-size: 17px;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #101010;
|
|
|
- text-align: center;
|
|
|
- height: 55px;
|
|
|
- .cell {
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- display: block;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.show-live {
|
|
|
- display: block;
|
|
|
- width: 1200px;
|
|
|
- height: 160px;
|
|
|
- margin: 24px auto;
|
|
|
- // background-color: #cbb385;
|
|
|
-}
|
|
|
-.show-pic {
|
|
|
- width: 1200px;
|
|
|
- // height: 192px;
|
|
|
- background: #ffffff;
|
|
|
- box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
|
|
|
- margin: 24px auto;
|
|
|
- .imgs-wrapper {
|
|
|
- padding: 14px 12px;
|
|
|
- .imgs {
|
|
|
- width: 1176px;
|
|
|
- // height: 124px;
|
|
|
- display: flex;
|
|
|
- flex-wrap: nowrap;
|
|
|
- overflow: auto hidden;
|
|
|
- img {
|
|
|
- width: 186px;
|
|
|
- height: 124px;
|
|
|
- margin-right: 12px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.friends {
|
|
|
- width: 1200px;
|
|
|
- // height: 96px;
|
|
|
- background: #ffffff;
|
|
|
- box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
|
|
|
- margin: 24px auto;
|
|
|
- .friend-list-wrapper {
|
|
|
- padding: 20px 28px 10px 28px;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- .friend-item {
|
|
|
- font-size: 14px;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #323131;
|
|
|
- margin-left: 51px;
|
|
|
- margin-bottom: 15px;
|
|
|
- .item-a {
|
|
|
- color: #323131;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
.el-carousel__button {
|
|
|
width: 16px;
|
|
|
height: 16px;
|