asd/shujuwang
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fanzhen 1022

Browse Source
This commit is contained in:
fanzhen123
2019-10-22 19:24:30 +08:00
parent 52e80e404b
commit 686ed8c82d
38 changed files with 2471 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

240
src/views/companyIntroduction/CompanyIntroduction.vue Normal file
View File

@@ -0,0 +1,240 @@
<template>
<div class="companyIntroduction">
<Navs></Navs>
<div class="content">
<!-- 全局搜索 -->
<search></search>
<div class="cont">
<div class="cont_top">
<div class="left">公司介绍</div>
<div class="right">
<img :src="imgurl.pos" alt />
<span>当前位置：</span>
<span @click="$router.push('/')">首页</span>
>
<span @click="$router.push('/companyIntroduction')">公司介绍</span>
</div>
</div>
<div class="cont_bottom">
<div class="bottom_left">
<div v-for="(item,index) in componData" :key="index">
<img :src="item.url" alt />
<div class="cont">
<div class="title">{{item.title}}</div>
<div class="co">{{item.cont}}</div>
</div>
</div>
</div>
<div class="bottom_right">
<div class="top">
<div class="left">公司简介</div>
<div class="right"></div>
</div>
<!-- 公司简介区域 -->
<div class="cont">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;河北知时数据科技有限公司（ZSDT）是国内专业的数据、信息与软件服务提供商，是一家拥有先进软件开发技术和自主知识产权的高科技企业，在数据的挖掘、应用及服务等相关技术领域，始终保持国际领先地位。
<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;公司致力于数据领域发展，秉承“专注数据 共享价值”的企业理念，依托自身的数据资源、技术研发优势及丰富的市场运营经验，打通数据获取、数据处理、数据服务环节，通过数据挖掘分析、机器学习预测，推动相关技术、应用和产业的创新，实现数据价值最大化。
<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;公司拥有专业的数据研究团队，现有数十名10年以上从事调研方案设计、数据采集、数据分析、数据挖掘的专业人员，同时与多家国内知名院校专家保持着密切合作
</div>
</div>
</div>
</div>
</div>
<div class="finashLeft"></div>
<!-- 页脚信息 -->
<FooterInfors></FooterInfors>
</div>
</template>
<script>
// 导航
import Nav from '@/components/nav/Nav.vue'
// 页脚信息
import FooterInfor from '@/components/footerInfor/FooterInfor.vue'
// 全局搜索
import search from '@/components/search/search.vue'
export default {
name: 'companyIntroduction',
components: {
Navs: Nav,
FooterInfors: FooterInfor,
search: search
},
data () {
return {
imgurl: {
pos: require('../../../static/company/posweizhi.png')
},
componData: [
{
url: require('../../../static/company/gongsi.png'),
title: '企业文化',
cont: '持诚信互利共荣，以厚德载物'
},
{
url: require('../../../static/company/linian.png'),
title: '理念',
cont: '释放政府数据价值'
},
{
url: require('../../../static/company/dingwei.png'),
title: '定位',
cont: '数据资源及技术服务商'
},
{
url: require('../../../static/company/yuanjing.png'),
title: '愿景',
cont: '推动数据成为最有价值的资产'
}
]
}
}
}
</script>
<style lang="scss" scoped>
.content {
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
& > .cont {
width: 84.25rem;
// border: 1px solid red;
background-color: #fff;
& > .cont_top {
width: 100%;
height: 5.125rem;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
border-bottom: 0.0625rem solid #dbdbdb;
& > .left {
margin-left: 1.5rem;
font-size: 1.5rem;
font-weight: bold;
font-stretch: normal;
letter-spacing: 0.125rem;
color: #000000;
}
& > .right {
margin-right: 1.5rem;
font-size: 1.25rem;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rem;
color: #8fa3ae;
& > img {
width: 1rem;
height: 1.25rem;
margin-right: 0.45rem;
}
& > span:nth-child(n + 3):hover {
cursor: pointer;
color: #52b6e3;
}
}
}
& > .cont_bottom {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: flex-start;
& > .bottom_left {
width: 42rem;
// border: 1px solid red;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
& > div {
width: 42rem;
height: 8.625rem;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
& > img {
margin: 0 1.5rem 0 0rem;
width: 3.875rem;
height: 3.25rem;
}
& > .cont {
height: 4.25rem;
// border: 1px solid red;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
& > .title {
font-size: 1.625rem;
font-weight: normal;
font-stretch: normal;
// line-height: 34px;
letter-spacing: 0rem;
color: #000000;
}
& > .co {
font-size: 1.25rem;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rem;
color: #333333;
}
}
}
}
& > .bottom_right {
margin-top: 1rem;
width: 37.25rem;
// border: 1px solid red;
& > .top {
width: 100%;
height: 5.5rem;
font-size: 3rem;
font-weight: normal;
font-stretch: normal;
// line-height: 34px;
letter-spacing: 0.125rem;
color: #000000;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
border-bottom: 0.25rem solid #dbdbdb;
& > .right {
width: 20.625rem;
height: 1.5rem;
background-color: #52b6e3;
}
}
& > .cont {
margin: 0 auto;
width: 36.875rem;
margin-top: 2.5rem;
// border: 1px solid red;
font-size: 1.25rem;
font-weight: normal;
font-stretch: normal;
line-height: 2.125rem;
letter-spacing: 0.0625rem;
color: #333333;
}
}
}
}
}
.finashLeft {
margin-bottom: 1.875rem;
width: 42.875rem;
height: 1.5rem;
background-color: #52b6e3;
}
</style>

815
src/views/index/Index.vue
View File

@@ -1,16 +1,827 @@
<template>
<div>这是首页</div>
<div>
<!-- 首页导航 -->
<Navs></Navs>
<!-- content -->
<section class="content">
<!-- swiper -->
<div class="content_cont">
<!-- swiper -->
<swiper :options="swiperOption" class="swipersty">
<swiper-slide v-for="(item,index) in bannerLuBo" :key="index">
<img :src="item" alt style="width: 84.25rem;height: 33.25rem;" />
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<div
class="swiper-button-prev"
slot="button-prev"
:style="{'background-image':'url('+lunboUp+')'}"
></div>
<div
class="swiper-button-next"
slot="button-next"
:style="{'background-image':'url('+lunboNext+')'}"
></div>
</swiper>
<!-- 全局搜索 -->
<search></search>
<!-- 主内容 -->
<div class="mainCont">
<div class="mainCont_left">
<div class="left1">
<div class="header">快速查询（专题统计报表）</div>
<img :src="titleimg" alt />
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane
:label="item.label"
:name="item.name"
v-for="(item,index) in dataSearchDatas"
:key="index"
class="Listpane"
>
<div class="ListpaneLeft">
<div v-for="(listLeft,keyLeft) in item.textArrLeft" :key="keyLeft">{{listLeft}}</div>
</div>
<div class="center"></div>
<div class="ListpaneRight">
<div
v-for="(listRight,keyRight) in item.textArrRight"
:key="keyRight"
class="ListpaneRight"
>{{listRight}}</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
<div class="left2">
<div class="header">可视化图表</div>
<img :src="titleimg" alt />
<div class="top">可视化统计图秉持方便易用的理念展示统计数字，通过简单的图像或动态界面及互动式统计图，您可更清楚了解一些统计指标。</div>
<!-- swiper -->
<swiper :options="swiperOptionS" class="swipersty" style="margin-top:1.2rem;">
<swiper-slide v-for="(item,index) in dataSwiperS" :key="index">
<img :src="item.url" alt style="width:16.125rem;height:11.25rem;" />
<div class="cont">
<div class="top">
{{item.label}}
<span>/{{'0'}}{{index+1}}</span>
</div>
<div class="bottom">{{item.compone}}</div>
</div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<div
class="swiper-button-prev"
slot="button-prev"
:style="{'background-image':'url('+ksLeft+')'}"
></div>
<div
class="swiper-button-next"
slot="button-next"
:style="{'background-image':'url('+ksRight+')'}"
></div>
</swiper>
</div>
<div class="left3">
<div class="header">数据资讯</div>
<img :src="titleimg" alt />
<div class="dataMessage" v-for="(item,index) in dataZxun" :key="index">
<div class="message_left">
<div class="top">{{item.title}}</div>
<div class="center">{{item.cont}}</div>
<div class="bottom">
<span>{{item.time}}</span>
<span>查看详情</span>
</div>
</div>
<img :src="item.url" alt />
</div>
<div class="moreD">
<div>查看更多-></div>
</div>
</div>
</div>
<div class="mainCont_right">
<div class="right1">
<div class="title">数据更新</div>
<div class="content">
<div v-for="(item,index) in dataUpdata" :key="index">
<div class="up">
{{computedStr(item.title)}}
<div class="next">({{item.updataTime}})</div>
</div>
</div>
</div>
</div>
<div class="right2">
<div class="title">24小时热文</div>
<div class="content">
<div v-for="(item,index) in twentyFourtimeData" :key="index">
<img :src="item.url" alt />
<div>
<div class="top">{{item.title}}</div>
<div class="bottom">{{item.content}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 页脚信息 -->
<FooterInfors></FooterInfors>
</div>
</template>
<script>
// 导航
import Nav from '@/components/nav/Nav.vue'
// 页脚信息
import FooterInfor from '@/components/footerInfor/FooterInfor.vue'
// 全局搜索
import search from '@/components/search/search.vue'
export default {
name: 'index',
components: {
Navs: Nav,
FooterInfors: FooterInfor,
search: search
},
data () {
return {
swiperOption: {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false
},
pagination: {
el: '.swiper-pagination',
clickable: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
},
bannerLuBo: [
require('../../../static/index/banner1.png'),
require('../../../static/index/banner1.png'),
require('../../../static/index/banner1.png'),
require('../../../static/index/banner1.png'),
require('../../../static/index/banner1.png'),
require('../../../static/index/banner1.png'),
require('../../../static/index/banner1.png')
],
lunboUp: require('../../../static/index/leftS.png'),
lunboNext: require('../../../static/index/rightS.png'),
titleimg: require('../../../static/index/title12.png'),
ksLeft: require('../../../static/index/ksLeft.png'),
ksRight: require('../../../static/index/ksRight.png'),
// 默认选中
activeName: 'first',
// 月度、季度、年度数据
dataSearchDatas: [
{
label: '月度 /Monthly',
name: 'first',
textArrLeft: [
'月度增加值增速工业，增加值增速增加值增速工业增加值增速增加值增速工业，增加值增速。',
'月度工业增加值增工业增加值增速工业速。',
'月度工业增加值增速。',
'月度工业增加值增速，工业工业增加值增工业增加值增工业增加值增工业，增加值增工业增加值增。'
],
textArrRight: [
'月度增加值增速工业，增加值增速增加值增速工业增加值增速增加值增速工业，增加值增速。',
'月度工业增加值增工业增加值增速工业速。',
'月度工业增加值增速。',
'月度工业增加值增速，工业工业增加值增工业增加值增工业增加值增工业，增加值增工业增加值增。'
]
},
{
label: '季度 /Quarter',
name: 'second',
textArrLeft: [
'季度增加值增速工业，增加值增速增加值增速工业增加值增速增加值增速工业，增加值增速。',
'季度工业增加值增工业增加值增速工业速。',
'季度工业增加值增速。',
'季度工业增加值增速，工业工业增加值增工业增加值增工业增加值增工业，增加值增工业增加值增。'
],
textArrRight: [
'季度增加值增速工业，增加值增速增加值增速工业增加值增速增加值增速工业，增加值增速。',
'季度工业增加值增工业增加值增速工业速。',
'季度工业增加值增速。',
'季度工业增加值增速，工业工业增加值增工业增加值增工业增加值增工业，增加值增工业增加值增。'
]
},
{
label: '年度 /Year',
name: 'third',
textArrLeft: [
'年度增加值增速工业，增加值增速增加值增速工业增加值增速增加值增速工业，增加值增速。',
'年度工业增加值增工业增加值增速工业速。',
'年度工业增加值增速。',
'年度工业增加值增速，工业工业增加值增工业增加值增工业增加值增工业，增加值增工业增加值增。'
],
textArrRight: [
'年度增加值增速工业，增加值增速增加值增速工业增加值增速增加值增速工业，增加值增速。',
'年度工业增加值增工业增加值增速工业速。',
'年度工业增加值增速。',
'年度工业增加值增速，工业工业增加值增工业增加值增工业增加值增工业，增加值增工业增加值增。'
]
}
],
swiperOptionS: {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false
},
pagination: {
el: '.swiper-pagination',
clickable: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
},
dataSwiperS: [
{
url: require('../../../static/index/luboer.png'),
label: '大中城市住宅销售价格',
compone: '这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释。'
},
{
url: require('../../../static/index/luboer.png'),
label: '大中城市住宅销售价格',
compone: '这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释。'
},
{
url: require('../../../static/index/luboer.png'),
label: '大中城市住宅销售价格',
compone: '这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释。'
},
{
url: require('../../../static/index/luboer.png'),
label: '大中城市住宅销售价格',
compone: '这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释。'
}
],
// 资讯数据
dataZxun: [
{
title: '这里是资讯',
cont: '这里是资讯这里是资讯，这里是资讯这里是资讯这里是资这里这里是资讯这里是资讯，这里是资讯这里是资讯这里是资这里...',
time: '57分钟前',
url: require('../../../static/index/zixuntu.png')
},
{
title: '这里是资讯',
cont: '这里是资讯这里是资讯，这里是资讯这里是资讯这里是资这里这里是资讯这里是资讯，这里是资讯这里是资讯这里是资这里...',
time: '57分钟前',
url: require('../../../static/index/zixuntu.png')
},
{
title: '这里是资讯',
cont: '这里是资讯这里是资讯，这里是资讯这里是资讯这里是资这里这里是资讯这里是资讯，这里是资讯这里是资讯这里是资这里...',
time: '57分钟前',
url: require('../../../static/index/zixuntu.png')
},
{
title: '这里是资讯',
cont: '这里是资讯这里是资讯，这里是资讯这里是资讯这里是资这里这里是资讯这里是资讯，这里是资讯这里是资讯这里是资这里...',
time: '57分钟前',
url: require('../../../static/index/zixuntu.png')
}
],
// 数据更新
dataUpdata: [
{
title: '数据库：农村居民国内游客对服务质量的评价统计（按旅游目的分组）',
updataTime: '2019-09-06 17:47:39'
},
{
title: '数据库：农村居民国内游客对服务质量的评价统计（按旅游目的分组）',
updataTime: '2019-09-06 17:47:39'
},
{
title: '数据库：农村居民国内游客对服务质量的评价统计（按旅游目的分组）',
updataTime: '2019-09-06 17:47:39'
},
{
title: '数据库：农村居民国内游客对服务质量的评价统计（按旅游目的分组）',
updataTime: '2019-09-06 17:47:39'
},
{
title: '数据库：农村居民国内游客对服务质量的评价统计（按旅游目的分组）',
updataTime: '2019-09-06 17:47:39'
},
{
title: '数据库：农村居民国内游客对服务质量的评价统计（按旅游目的分组）（按旅游目的分组）',
updataTime: '2019-09-06 17:47:39'
}
],
// 24小时热闻数据
twentyFourtimeData: [
{
url: require('../../../static/index/timeLZ.png'),
title: '这是标题',
content: '数据热文数据热文数据热文数据热文数据热文数据热文'
},
{
url: require('../../../static/index/timeLZ.png'),
title: '这是标题',
content: '数据热文数据热文数据热文数据热文数据热文数据热文'
},
{
url: require('../../../static/index/timeLZ.png'),
title: '这是标题',
content: '数据热文数据热文数据热文数据热文数据热文数据热文'
},
{
url: require('../../../static/index/timeLZ.png'),
title: '这是标题',
content: '数据热文数据热文数据热文数据热文数据热文数据热文'
},
{
url: require('../../../static/index/timeLZ.png'),
title: '这是标题',
content: '数据热文数据热文数据热文数据热文数据热文数据热文'
}
]
}
},
methods: {
handleClick (tab, event) {
console.log(tab, event)
}
},
computed: {
// 计算字符串
computedStr () {
return (str) => {
let Strs = ''
str.length <= 32 ? (Strs = str) : (Strs = str.slice(0, 31) + '...')
return Strs
}
}
}
}
</script>
<style scoped lang="scss">
.content {
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
& > .content_cont {
width: 84.25rem;
// border: 1px solid red;
& > .swipersty {
width: 100%;
height: 33.25rem;
}
& > .mainCont {
margin-top: 3.125rem;
margin-bottom:3.125rem;
width: 100%;
// border: 0.0625rem solid red;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
& > .mainCont_left {
// border: 0.0625rem solid red;
width: 55.625rem;
box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
background-color: #fff;
& > .left1 {
margin-top: 2.5rem;
width: 100%;
& > .header {
width: 100%;
text-align: center;
font-size: 1.625rem;
font-weight: bold;
font-stretch: normal;
letter-spacing: 0.375rem;
color: #000000;
}
& > img {
width: 100%;
height: 0.75rem;
}
/deep/ .el-tabs__item {
font-size: 1.4rem;
font-weight: bold;
font-stretch: normal;
}
.Listpane {
padding: 1.25rem;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
& > .ListpaneLeft {
width: 24.75rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
& > div {
width: 100%;
height: 4.375rem;
font-size: 1.125rem;
font-weight: normal;
font-stretch: normal;
line-height: 2rem;
letter-spacing: 0rem;
color: #666666;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* 省略号在第几行 */
-webkit-box-orient: vertical;
}
& > div:nth-last-child(n + 2) {
border-bottom: 0.0625rem solid #f0f0f0;
}
& > div:hover {
cursor: pointer;
color: #52b6e3;
}
}
& > .center {
width: 0.125rem;
height: 17rem;
background-color: #dbdbdb;
}
& > .ListpaneRight {
width: 24.75rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
& > div {
width: 100%;
height: 4.375rem;
font-size: 1.125rem;
font-weight: normal;
font-stretch: normal;
line-height: 2rem;
letter-spacing: 0rem;
color: #666666;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* 省略号在第几行 */
-webkit-box-orient: vertical;
}
& > div:nth-last-child(n + 2) {
border-bottom: 0.0625rem solid #f0f0f0;
}
& > div:hover {
cursor: pointer;
color: #52b6e3;
}
}
}
}
& > .left2 {
width: 100%;
& > .header {
width: 100%;
text-align: center;
font-size: 1.625rem;
font-weight: bold;
font-stretch: normal;
letter-spacing: 0.375rem;
color: #000000;
}
& > img {
width: 100%;
height: 0.75rem;
}
& > .top {
margin: 0 auto;
width: 39.75rem;
text-align: center;
font-size: 1rem;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0.125rem;
color: #565656;
}
/deep/.swiper-slide {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: flex-start;
& > .cont {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
& > .top {
font-size: 1.375rem;
font-weight: bold;
font-stretch: normal;
line-height: 1.125rem;
letter-spacing: 0.125rem;
color: #333333;
& > span {
color: #52b6e3;
}
}
& > .bottom {
width: 32.125rem;
font-size: 1.125rem;
font-weight: normal;
font-stretch: normal;
line-height: 2.125rem;
letter-spacing: 0rem;
color: #2d2d2d;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4; /* 省略号在第几行 */
-webkit-box-orient: vertical;
}
}
}
}
& > .left3 {
margin-top: 1.5rem;
width: 100%;
& > .header {
width: 100%;
text-align: center;
font-size: 1.625rem;
font-weight: bold;
font-stretch: normal;
letter-spacing: 0.375rem;
color: #000000;
}
& > img {
width: 100%;
height: 0.75rem;
}
& > .dataMessage {
width: 100%;
height: 10.625rem;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
& > .message_left {
width: 39.125rem;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
& > .top {
width: 39.125rem;
font-size: 1.375rem;
font-weight: normal;
font-stretch: normal;
// line-height: 1.375rem;
letter-spacing: 0.125rem;
color: #232323;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1; /* 省略号在第几行 */
-webkit-box-orient: vertical;
}
& > .center {
width: 39.125rem;
font-size: 1.25rem;
font-weight: normal;
font-stretch: normal;
line-height: 2rem;
letter-spacing: 0rem;
color: #424242;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* 省略号在第几行 */
-webkit-box-orient: vertical;
}
& > .bottom {
width: 37.625rem;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
& > span:nth-child(1) {
font-size: 1rem;
font-weight: normal;
font-stretch: normal;
line-height: 1.875rem;
letter-spacing: 0rem;
color: #999999;
}
& > span:nth-child(2) {
padding: 0.125rem 0.75rem;
font-size: 1rem;
font-weight: normal;
font-stretch: normal;
line-height: 1.875rem;
letter-spacing: 0rem;
color: #999999;
border: 0.0625rem solid #999;
border-radius: 0.9375rem;
}
& > span:nth-child(2):hover {
cursor: pointer;
color: #52b6e3;
border: 0.0625rem solid #52b6e3;
}
}
}
& > img {
width: 13.125rem;
height: 7.5rem;
border-radius: 0.725rem;
}
}
& > .dataMessage:nth-last-child(n + 1) {
border-bottom: 0.0625rem solid #dbdbdb;
}
& > .moreD {
width: 100%;
height: 7.5rem;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
& > div {
margin-right: 1.5rem;
font-size: 1.25rem;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0.125rem;
color: #9ea5a7;
}
& > div:hover{
cursor: pointer;
color: #52b6e3;
}
}
}
}
& > .mainCont_right {
width: 27.375rem;
& > .right1 {
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
background-color: #ffffff;
box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
& > .title {
width: 24.875rem;
height: 3.75rem;
font-size: 1.5rem;
font-weight: bold;
font-stretch: normal;
letter-spacing: 0.3125rem;
color: #000000;
border-bottom: 0.0625rem solid #dbdbdb;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
& > .content {
width: 24.875rem;
& > div {
width: 100%;
height: 5.25rem;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
& > .up {
position: relative;
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
font-size: 1.125rem;
line-height: 2.125rem;
color: #333333;
// border: 1px solid red;
& > .next {
width: 12.625rem;
position: absolute;
right: 0;
bottom: 0;
font-size: 1.125rem;
}
}
& > .up:hover {
cursor: pointer;
color: #52b6e3;
}
}
& > div:nth-last-child(n + 2) {
border-bottom: 0.0625rem solid #dbdbdb;
}
}
}
& > .right2 {
margin-top: 1.25rem;
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
background-color: #ffffff;
box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
& > .title {
width: 24.875rem;
height: 3.75rem;
font-size: 1.5rem;
font-weight: bold;
font-stretch: normal;
letter-spacing: 0.3125rem;
color: #000000;
border-bottom: 0.0625rem solid #dbdbdb;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
& > .content {
width: 24.875rem;
& > div {
width: 100%;
height: 7.625rem;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
& > img {
width: 7.25rem;
height: 5.125rem;
}
& > div {
width: 16rem;
height: 5.125rem;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
& > .top {
font-size: 1.125rem;
font-weight: normal;
font-stretch: normal;
// line-height: 23px;
letter-spacing: 0rem;
color: #333333;
}
& > .bottom {
width: 16rem;
font-size: 1rem;
font-weight: normal;
font-stretch: normal;
line-height: 1.5rem;
letter-spacing: 0rem;
color: #666666;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* 省略号在第几行 */
-webkit-box-orient: vertical;
}
}
}
& > div:hover {
cursor: pointer;
}
}
}
}
}
}
}
</style>

12
src/views/personalCenter/PersonalCenter.vue Normal file
View File

@@ -0,0 +1,12 @@
<template>
<div></div>
</template>
<script>
export default {
name: 'personal'
}
</script>
<style lang="scss" scoped>
</style>

275
src/views/relation/Relation.vue Normal file
View File

@@ -0,0 +1,275 @@
<template>
<div class="relation">
<!-- 首页导航 -->
<Navs></Navs>
<div class="relation_cont">
<div class="header">
<div class="left">联系我们</div>
<div class="right">
<img :src="imgurl.pos" alt />
<span>当前位置：</span>
<span @click="$router.push('/')">首页</span>
>
<span @click="$router.push('/relation')">联系我们</span>
</div>
</div>
<div class="center">
<div class="title">留言板</div>
<div class="center_input">
<input type="text" placeholder="姓名*" v-model="leave.name" />
<input type="text" placeholder="邮箱*" v-model="leave.mail" />
<input type="text" placeholder="电话*" v-model="leave.iphone" />
</div>
<input type="text" placeholder="标题*" v-model="leave.title" />
<textarea v-model="leave.cont" placeholder="留言内容*"></textarea>
<div class="sub">提交</div>
</div>
<div class="bottom">
<div class="contactWay">联系方式</div>
<div class="contactWay_cont">
<div v-for="(item,index) in relationData" :key="index">
<div>
<span>地区</span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.region}}
</div>
<div>
<span>联系人</span>
&nbsp;&nbsp;&nbsp;&nbsp;{{item.name}}
</div>
<div>
<span>电话</span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.iphone}}
</div>
<div>
<span>地址</span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.site}}
</div>
</div>
</div>
</div>
</div>
<!-- 页脚信息 -->
<FooterInfors></FooterInfors>
</div>
</template>
<script>
// 导航
import Nav from '@/components/nav/Nav.vue'
// 页脚信息
import FooterInfor from '@/components/footerInfor/FooterInfor.vue'
export default {
name: 'relation',
components: {
Navs: Nav,
FooterInfors: FooterInfor
},
data () {
return {
imgurl: {
pos: require('../../../static/company/posweizhi.png')
},
leave: {
name: '',
mail: '',
iphone: '',
title: '',
cont: ''
},
relationData: [
{
region: '华东',
name: '李先生',
iphone: '000-12345678',
site: '北京市西城区月坛南街57号'
},
{
region: '华东',
name: '李先生',
iphone: '000-12345678',
site: '北京市西城区月坛南街57号'
},
{
region: '华东',
name: '李先生',
iphone: '000-12345678',
site: '北京市西城区月坛南街57号'
}
]
}
}
}
</script>
<style lang="scss" scoped>
.relation_cont {
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
& > .header {
width: 84.25rem;
height: 4.25rem;
// border: 1px solid red;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
& > .left {
// margin-left: 1.5rem;
font-size: 1.5rem;
font-weight: bold;
font-stretch: normal;
letter-spacing: 0.125rem;
color: #000000;
}
& > .right {
// margin-right: 1.5rem;
font-size: 1.25rem;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rem;
color: #8fa3ae;
& > img {
width: 1rem;
height: 1.25rem;
margin-right: 0.45rem;
}
& > span:nth-child(n + 3):hover {
cursor: pointer;
color: #52b6e3;
}
}
}
& > .center {
width: 84.25rem;
height: 63.5rem;
// border: 1px solid red;
background-color: #ffffff;
box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
& > .title {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 8.75rem;
font-size: 1.5rem;
font-weight: normal;
font-stretch: normal;
// line-height: 19px;
letter-spacing: 0rem;
color: #000000;
}
& > .center_input {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
& > input {
width: 21.25rem;
height: 3.125rem;
font-size: 1.25rem;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rem;
color: #666666;
opacity: 0.7;
}
}
& > input {
width: 77.4rem;
height: 3.125rem;
font-size: 1.25rem;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rem;
color: #666666;
opacity: 0.7;
}
& > textarea {
width: 77.4rem;
height: 35rem;
}
& > .sub {
width: 23.5rem;
height: 3.5rem;
background-color: #52b6e3;
border-radius: 0.3125rem;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-size: 1.375rem;
font-weight: normal;
font-stretch: normal;
// line-height: 19px;
letter-spacing: 0rem;
color: #ffffff;
}
& > .sub:hover {
cursor: pointer;
}
}
& > .bottom {
width: 84.25rem;
// border: 1px solid red;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
& > .contactWay {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 6.2rem;
font-size: 1.5rem;
font-weight: normal;
font-stretch: normal;
// line-height: 19px;
letter-spacing: 0rem;
color: #000000;
}
& > .contactWay_cont {
margin-bottom:2.375rem;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
& > div {
width: 22.25rem;
height: 10.625rem;
// border: 1px solid red;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
& > div {
font-size: 1.25rem;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rem;
color: #666666;
& > span {
font-size: 1.25rem;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rem;
color: #333333;
}
}
}
}
}
}
</style>