suixy
/
portal_website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改关于海威格式

Browse Source
master
suixy 4 weeks ago
parent 2943b05cd7
commit fe8db66f46
8 changed files with 214 additions and 69 deletions
Show Stats Download Patch File Download Diff File

2
src/components/el/industrySolutionsEl/el1.vue
Unescape Escape View File

@ -47,7 +47,7 @@ export default {
}
.value {
width: 62vw;
width: 85vw;
margin: 2vw auto 4vw auto;
text-align: left;
font-size: 1vw;

27
src/components/el/industrySolutionsEl/el3.vue
Unescape Escape View File

@ -7,18 +7,20 @@
</div>
<div class="divider"></div>
<div class="list">
<div class="item" @click="toLink(i)" v-for=" (i,k) in data.list">
<div class="img1">
<div class="img">
<el-image
style="width: 100%; height: 100%;"
:src="i.img"
fit="contain"></el-image>
<template v-for="i in data.list">
<div class="item" @click="toLink(i)">
<div class="img1">
<div class="img">
<el-image
style="width: 100%; height: 100%;"
:src="i.img"
fit="contain"></el-image>
</div>
</div>
<div class="title1">{{ i.title }}</div>
<i class="el-icon-right icon"></i>
</div>
<div class="title1">{{ i.title }}</div>
<i class="el-icon-right icon"></i>
</div>
</template>
</div>
</div>
</template>
@ -66,8 +68,9 @@ export default {
.list {
width: 62vw;
width: 85vw;
margin: 3vw auto 0;
text-align: left;
.item {
margin-right: 3vw;
@ -131,7 +134,7 @@ export default {
}
&:nth-child(2n) {
margin-right: 0%;
margin-right: 0;
}
}
}

13
src/components/global/index.js
Unescape Escape View File

@ -0,0 +1,13 @@
import Vue from 'vue'
const components = require.context('./', false, /\.vue$/)
components.keys().forEach(fileName => {
const componentConfig = components(fileName)
const componentName = fileName
.replace(/^\.\//, '')
.replace(/\.\w+$/, '')
.replace(/(^|-)(\w)/g, (match, separator, char) => char.toUpperCase())
Vue.component(componentName, componentConfig.default || componentConfig)
})

37
src/components/global/title.vue
Unescape Escape View File

@ -0,0 +1,37 @@
<template>
<div>
<div class="title">{{ title }}</div>
<div class="divider"></div>
</div>
</template>
<script>
export default {
name: 'Title',
props: {
title: {
type: String,
default: '标题'
}
}
}
</script>
<style scoped lang="less">
.title {
margin-top: 4.2vw;
width: 100%;
text-align: center;
font-size: 2.2vw;
font-weight: 600;
letter-spacing: 2px;
color: #000;
}
.divider {
width: 4vw;
height: 4px;
background: #3372FE;
border-radius: 999px;
margin: 10px auto;
}
</style>

1
src/main.js
Unescape Escape View File

@ -12,6 +12,7 @@ import 'swiper/css/bundle';
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import "@/components/global";
Vue.config.productionTip = false
Vue.use(ElementUI);
Vue.use(Vue2Editor);

32
src/views/index/classicCase1.vue
Unescape Escape View File

@ -1,22 +1,20 @@
<template>
<div>
<!-- <div class="title">CLASSIC CASE</div>-->
<div class="subTitle">典型案例</div>
<Title title="典型案例"/>
<div class="content">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane :label="i.homeConfigTypeName" :name="`${i.configTypeId}`" v-for="(i,k) in data">
<transition name="fade">
<div v-if="activeName === `${i.configTypeId}`" style="position:relative;">
<div v-if="activeName === `${i.configTypeId}`" style="position:relative;height: 30vw">
<div class="left">
<div class="caseTitle">{{ i.caseInfoTitle }}</div>
<div class="caseInfo">
{{ i.caseInfoDesc }}
</div>
<div class="getCaseInfo" @click="getCaseInfo(i)">查看详情 >></div>
</div>
<div class="learnMore" @click="getCaseInfo(i)">
<span>
想了解更多？
查看详情
</span>
<div class="toRight">
<i class="el-icon-arrow-right"></i>
@ -25,8 +23,7 @@
<div class="caseImage">
<el-image
style="width: 100%;height: 100%"
:src="i.caseInfoPic"
fit="contain"></el-image>
:src="i.caseInfoPic"></el-image>
</div>
</div>
</transition>
@ -39,9 +36,11 @@
<script>
import banner from '@/assets/image/banner.png'
import {getHomeCaseTitleList, getTypicalHomeCaseInfo} from "@/api";
import Title from "@/components/global/title.vue";
export default {
name: 'ProductCenter',
components: {Title},
props: ['data'],
data() {
return {
@ -115,7 +114,6 @@ export default {
})
},
getCaseInfo(e) {
console.log(e)
this.$router.push(`/industrySolutions?id=${e.configTypeId}`)
// this.$router.push(`/productCenter/detail?type=${e.linkData[0]}&typeId=${e.linkData[1]}&id=${e.linkData[2]}`)
// this.$router.push("test?id=" + e.configTypeId)
@ -141,7 +139,7 @@ export default {
/deep/ .el-tabs__item {
letter-spacing: 3px;
padding: 0 0.5vw;
padding: 0 1.5vw;
height: 2.9vw;
line-height: 2.9vw;
font-size: 1.6vw;
@ -195,7 +193,7 @@ export default {
}
.left {
width: 52%;
width: 45%;
padding-top: 1.7vw;
word-break: break-all;
@ -204,6 +202,7 @@ export default {
font-size: 1.5vw;
text-align: left;
letter-spacing: 2px;
line-height: 2vw;
}
.caseInfo {
@ -213,6 +212,11 @@ export default {
margin-top: 0.9vw;
line-height: 1.78vw;
letter-spacing: 2px;
height: calc(30vw - 1.7vw - 2vw - 0.9vw - 4.7vw - 1.1vw);
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 11;
}
.getCaseInfo {
@ -275,4 +279,12 @@ export default {
animation: fadeOutLeft;
animation-duration: 0.5s;
}
.divider {
width: 4vw;
height: 4px;
background: #3372FE;
border-radius: 999px;
margin: 10px auto;
}
</style>

109
src/views/index/newsCenter.vue
Unescape Escape View File

@ -2,24 +2,40 @@
<div>
<!-- <div class="title">NEWS CENTER</div>-->
<div class="subTitle">新闻中心</div>
<div class="newsList">
<div v-for="i in data" :key="i.id" class="newsItem">
<div class="newsDay">{{ i.day }}</div>
<div class="newsTime">{{ i.month }}/{{ i.year }}</div>
<div class="newsTitle">
<span class="newsTag" :style="tagStyle(i.type)">[{{ i.tag }}]</span>{{ i.title }}
<div class="newsListWrap">
<el-button
v-if="data.length > 4"
class="newsArrow newsArrowLeft"
icon="el-icon-arrow-left"
circle
@click="scrollNews(-1)">
</el-button>
<div ref="newsList" class="newsList">
<div v-for="i in data" :key="i.id" class="newsItem">
<div class="newsDay">{{ i.day }}</div>
<div class="newsTime">{{ i.month }}/{{ i.year }}</div>
<div class="newsTitle">
<span class="newsTag" :style="tagStyle(i.type)">[{{ i.tag }}]</span>{{ i.title }}
</div>
<div class="newsImage">
<el-image
style="width: 100%;height: 100%"
:src="i.cover"
fit="contain"></el-image>
</div>
<div class="newsInfo">
{{ i.summary }}
</div>
<div class="newsDetail" @click="viewDetail(i)">查看详情 ></div>
</div>
<div class="newsImage">
<el-image
style="width: 100%;height: 100%"
:src="i.cover"
fit="contain"></el-image>
</div>
<div class="newsInfo">
{{ i.summary }}
</div>
<div class="newsDetail" @click="viewDetail(i)">查看详情 ></div>
</div>
<el-button
v-if="data.length > 4"
class="newsArrow newsArrowRight"
icon="el-icon-arrow-right"
circle
@click="scrollNews(1)">
</el-button>
</div>
<div class="learnMore">
<el-button type="primary" plain>查看更多</el-button>
@ -79,6 +95,15 @@ export default {
path: '/newsDetail',
query: {newsCode: e.newsCode}
})
},
scrollNews(direction) {
const newsList = this.$refs.newsList
if (!newsList) return
console.log(window.innerWidth * 0.185)
newsList.scrollBy({
left: window.innerWidth * 0.215 * direction,
behavior: 'smooth'
})
}
}
}
@ -111,25 +136,62 @@ export default {
color: #000;
}
.newsList {
.newsListWrap {
position: relative;
margin-top: 3.9vw;
}
.newsArrow {
position: absolute;
top: 50%;
z-index: 1;
width: 2vw;
height: 2vw;
padding: 0;
transform: translateY(-50%);
/deep/ i {
font-size: 1.2vw;
}
}
.newsArrowLeft {
left: -3vw;
}
.newsArrowRight {
right: -3vw;
}
.newsList {
text-align: left;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
.newsItem {
cursor: pointer;
transition: all 0.2s;
display: inline-block;
width: 17vw;
vertical-align: top;
white-space: normal;
width: 17.5vw;
margin-right: 1vw;
background-color: #f8f8f8;
text-align: left;
padding: 1.5vw;
&:last-child {
margin-right: 0;
}
.newsDay {
margin-top: 0.7vw;
font-size: 2.9vw;
color: #000;
transition: all 0.2s;
min-height: 3.2vw;
line-height: 3.2vw;
}
.newsTime {
@ -138,6 +200,7 @@ export default {
color: #666;
transition: all 0.2s;
letter-spacing: 2px;
min-height: 1.1vw;
}
.newsTitle {
@ -147,6 +210,11 @@ export default {
transition: all 0.2s;
line-height: 1.9vw;
letter-spacing: 3px;
min-height: 3.8vw;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.newsImage {
@ -161,6 +229,11 @@ export default {
color: #666;
transition: all 0.2s;
line-height: 1.4vw;
min-height: 5.6vw;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
.newsDetail {

62
src/views/index/productCenter.vue
Unescape Escape View File

@ -1,29 +1,28 @@
<template>
<div>
<!-- <div class="title">PRODUCT CENTER</div>-->
<div class="subTitle">产品中心</div>
<Title title="产品中心"/>
<div class="productList">
<template v-for="(i,k) in data">
<div class="productItem" @click="toLink(i)">
<div class="imageArea">
<el-image
style="width: 100%;height: 100%"
:src="i.homeConfigTypePic"
fit="contain"></el-image>
</div>
<div class="imageAreaModel">
<div class="imageArea">
<el-image
style="width: 100%;height: 100%"
:src="i.homeConfigTypePic"
fit="contain"></el-image>
</div>
<div class="imageAreaModel">
<span>
{{ i.configTypeDesc }}
</span>
</div>
<div class="titleArea">
</div>
<div class="titleArea">
<span>
{{ i.homeConfigTypeName }}
</span>
</div>
</div>
</div>
</div>
<br v-if="k === 3"/>
</template>
</div>
@ -33,9 +32,11 @@
<script>
import banner from '@/assets/image/banner.png'
import {getPortalConfigTypeList} from "@/api";
import Title from "@/components/global/title.vue";
export default {
name: 'ProductCenter',
components: {Title},
props: ['data'],
data() {
return {
@ -80,17 +81,17 @@ export default {
]
}
},
mounted(){
mounted() {
this.getData()
},
methods:{
toLink(e){
methods: {
toLink(e) {
console.log(e)
// this.$router.push('/productCenter#item' + e.configTypeId)
this.$router.push(`/productCenter/detail?type=${e.linkData[0]}&typeId=${e.linkData[1]}&id=${e.linkData[2]}`)
console.log(e.configTypeId)
},
getData(){
getData() {
// getPortalConfigTypeList({
// configTypeClassfication:1,
// parentId:0,
@ -128,20 +129,24 @@ export default {
.productList {
position: relative;
margin-top: 4vw;
width: 85vw;
margin: 0 auto;
.productItem {
display: inline-block;
width: 19vw;
height: 22vw;
margin: 0 1.7vw;
margin: 4vw 3vw 0 0;
box-shadow: 0 0 10px #0003;
position: relative;
margin-top: 2vw;
&:nth-child(5n + 4) {
margin-right: 0;
}
.imageArea {
width: 12.5vw;
height: 12.5vw;
width: 17vw;
height: 17vw;
padding: 1vw;
position: relative;
background-color: #fff;
@ -149,22 +154,23 @@ export default {
.imageAreaModel {
position: absolute;
width: 14.5vw;
height: 14.5vw;
width: 19vw;
height: 19vw;
top: 0;
left: 0;
opacity: 0;
background-image: radial-gradient(transparent 1px, fade(@standard-color, 80) 1px);
background-image: radial-gradient(fade(@standard-color, 80) 0,
fade(@standard-color, 80) 100%);
backdrop-filter: saturate(50%) blur(4px);
transition: all 0.3s;
span {
display: inline-block;
width: 10vw;
height: 10vw;
width: 14.5vw;
height: 14.5vw;
padding: 2.25vw;
color: #fefefe;
font-size: 0.9vw;
font-size: 1.1vw;
line-height: 1.7vw;
}
}

Write Preview
Loading…
Cancel
Save