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

修改关于海威格式

Browse Source
master
suixy 1 month 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 { .value {
width: 62vw; width: 85vw;
margin: 2vw auto 4vw auto; margin: 2vw auto 4vw auto;
text-align: left; text-align: left;
font-size: 1vw; font-size: 1vw;

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

@ -7,18 +7,20 @@
</div> </div>
<div class="divider"></div> <div class="divider"></div>
<div class="list"> <div class="list">
<div class="item" @click="toLink(i)" v-for=" (i,k) in data.list"> <template v-for="i in data.list">
<div class="img1"> <div class="item" @click="toLink(i)">
<div class="img"> <div class="img1">
<el-image <div class="img">
style="width: 100%; height: 100%;" <el-image
:src="i.img" style="width: 100%; height: 100%;"
fit="contain"></el-image> :src="i.img"
fit="contain"></el-image>
</div>
</div> </div>
<div class="title1">{{ i.title }}</div>
<i class="el-icon-right icon"></i>
</div> </div>
<div class="title1">{{ i.title }}</div> </template>
<i class="el-icon-right icon"></i>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -66,8 +68,9 @@ export default {
.list { .list {
width: 62vw; width: 85vw;
margin: 3vw auto 0; margin: 3vw auto 0;
text-align: left;
.item { .item {
margin-right: 3vw; margin-right: 3vw;
@ -131,7 +134,7 @@ export default {
} }
&:nth-child(2n) { &: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.core.css";
import "quill/dist/quill.snow.css"; import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css"; import "quill/dist/quill.bubble.css";
import "@/components/global";
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.use(ElementUI); Vue.use(ElementUI);
Vue.use(Vue2Editor); Vue.use(Vue2Editor);

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

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

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

@ -2,24 +2,40 @@
<div> <div>
<!-- <div class="title">NEWS CENTER</div>--> <!-- <div class="title">NEWS CENTER</div>-->
<div class="subTitle">新闻中心</div> <div class="subTitle">新闻中心</div>
<div class="newsList"> <div class="newsListWrap">
<div v-for="i in data" :key="i.id" class="newsItem"> <el-button
<div class="newsDay">{{ i.day }}</div> v-if="data.length > 4"
<div class="newsTime">{{ i.month }}/{{ i.year }}</div> class="newsArrow newsArrowLeft"
<div class="newsTitle"> icon="el-icon-arrow-left"
<span class="newsTag" :style="tagStyle(i.type)">[{{ i.tag }}]</span>{{ i.title }} 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>
<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>
<el-button
v-if="data.length > 4"
class="newsArrow newsArrowRight"
icon="el-icon-arrow-right"
circle
@click="scrollNews(1)">
</el-button>
</div> </div>
<div class="learnMore"> <div class="learnMore">
<el-button type="primary" plain>查看更多</el-button> <el-button type="primary" plain>查看更多</el-button>
@ -79,6 +95,15 @@ export default {
path: '/newsDetail', path: '/newsDetail',
query: {newsCode: e.newsCode} 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; color: #000;
} }
.newsList { .newsListWrap {
position: relative;
margin-top: 3.9vw; 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; text-align: left;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
.newsItem { .newsItem {
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
display: inline-block; display: inline-block;
width: 17vw; vertical-align: top;
white-space: normal;
width: 17.5vw;
margin-right: 1vw; margin-right: 1vw;
background-color: #f8f8f8; background-color: #f8f8f8;
text-align: left; text-align: left;
padding: 1.5vw; padding: 1.5vw;
&:last-child {
margin-right: 0;
}
.newsDay { .newsDay {
margin-top: 0.7vw; margin-top: 0.7vw;
font-size: 2.9vw; font-size: 2.9vw;
color: #000; color: #000;
transition: all 0.2s; transition: all 0.2s;
min-height: 3.2vw;
line-height: 3.2vw;
} }
.newsTime { .newsTime {
@ -138,6 +200,7 @@ export default {
color: #666; color: #666;
transition: all 0.2s; transition: all 0.2s;
letter-spacing: 2px; letter-spacing: 2px;
min-height: 1.1vw;
} }
.newsTitle { .newsTitle {
@ -147,6 +210,11 @@ export default {
transition: all 0.2s; transition: all 0.2s;
line-height: 1.9vw; line-height: 1.9vw;
letter-spacing: 3px; letter-spacing: 3px;
min-height: 3.8vw;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
} }
.newsImage { .newsImage {
@ -161,6 +229,11 @@ export default {
color: #666; color: #666;
transition: all 0.2s; transition: all 0.2s;
line-height: 1.4vw; line-height: 1.4vw;
min-height: 5.6vw;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
} }
.newsDetail { .newsDetail {

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

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

Write Preview
Loading…
Cancel
Save