Skip to content

W
web-template
Commit 84429c89 authored by 张伯涛's avatar 张伯涛
Browse files
Options

首页初步搭建

parent b08e1321
Show whitespace changes
Inline Side-by-side
Showing with 489 additions and 4 deletions
src/assets/image/profile.jpg
View replaced file @ b08e1321 View file @ 84429c89
src/assets/image/profile.jpg

79.2 KB | W: | H:

src/assets/image/profile.jpg

2.2 KB | W: | H:

src/assets/image/profile.jpg
src/assets/image/profile.jpg
src/assets/image/profile.jpg
src/assets/image/profile.jpg
  • 2-up
  • Swipe
  • Onion skin
src/views/homePage/index.vue
View file @ 84429c89
......@@ -3,7 +3,195 @@
<HomeSearch />
<nav-list :list="navList" />
<div class="home-content">
首页
<!-- 政策，今日申报，用户登录信息-->
<div class="content-top">
<el-row :gutter="15">
<el-col :span="8">
<div class="top-retrieval">
<div class="text">政策检索</div>
<div class="button">
<el-button>立即检索</el-button>
</div>
</div>
<div class="top-left-down">
<el-row :gutter="10">
<el-col :span="8">
<div class="tld-retrieval">
<div class="tld-text">政策推荐</div>
<div class="tld-button">
<el-button>查看推荐</el-button>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="tld-retrieval">
<div class="tld-text">政策订阅</div>
<div class="tld-button">
<el-button>查看订阅</el-button>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="tld-retrieval">
<div class="tld-text">政策图解</div>
<div class="tld-button">
<el-button>查看图解</el-button>
</div>
</div>
</el-col>
</el-row>
</div>
</el-col>
<el-col :span="12">
<div class="reportToday">
<div class="reportToday-title">
<div class="rt-title">今日申报</div>
<div class="rt-more">
<span>更多</span>
<i class="el-icon-d-arrow-right" />
</div>
</div>
<div class="reportToday-content">
<div
v-for="(item, index) in reportTodayList"
:key="index"
class="reportToday-contentChild"
>
<span :title="item.value">{{ item.value }}</span>
</div>
</div>
</div>
</el-col>
<el-col :span="4">
<div class="user-info">
<div class="userInfo-top">
<el-image style="width: 85px;height: 85px;border-radius: 50%;" :src="defaultUrl" />
<div style="padding: 10px 0 0">
昵称: 未登录
</div>
<el-divider />
</div>
<div class="userInfo-content">
<div class="info">绑定手机:<span> 未登录</span></div>
<div class="info">绑定邮箱:<span> 未登录</span></div>
<div class="info">当前企业:<span> 未登录</span></div>
<div style="text-align: center;padding: 5px 0">
<el-button class="login-btn">注册/登录</el-button>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
<!-- 服务共享-->
<div class="content-service">
<div class="content-service-title">
<div class="cs-title">服务共享</div>
<div class="cs-more">
<span>更多</span>
<i class="el-icon-d-arrow-right" />
</div>
</div>
<div class="service-card">
<el-row :gutter="10">
<el-col
v-for="(item,index) in serviceList"
:key="index"
:span="8"
>
<div class="sc-child">
<div class="sc-title">{{ item.title }}</div>
</div>
<div class="sc-name">
{{ item.name }}
</div>
</el-col>
</el-row>
</div>
</div>
<!-- 日历，活动信息-->
<div class="activity-info">
<el-row :gutter="10">
<el-col :span="8">
<div style="border: 1px solid #d6d6d6;">
<el-calendar v-model="value" />
</div>
</el-col>
<el-col :span="16">
<div class="activity-info-title">
<div class="ai-title">活动信息</div>
<div class="ai-more">
<span>更多</span>
<i class="el-icon-d-arrow-right" />
</div>
</div>
<div class="activity-info-content">
<div
v-for="(item,index) in activityInfoList"
:key="index"
class="aic-child"
>
<div class="card">
<div>{{ item.title }}</div>
<div class="card-content">
<div>{{ item.date }}</div>
<div>{{ item.address }}</div>
<div style=" color: #018FD6;">
<i class="el-icon-d-arrow-right" />
</div>
</div>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
<!-- 一键办事-->
<div class="oneClick-service">
<div class="oneClick-service-title">
<div class="os-title">一键办事</div>
<div class="os-more">
<ul class="sf-menu">
<li
v-for="(item, index) in Typelist"
:key="index"
:class="{'sf-menu-item': true, 'sf-menu-item__active': choseType === item.name}"
@click.stop="changeType(item)"
>{{ item.name }}</li>
</ul>
</div>
</div>
<div class="oneClick-service-content">
<div
v-for="(item, index) in oneclickServiceList"
:key="index"
class="os-card"
>
<img :src="item.img" class="os-img">
<span style="padding-left: 10px">{{ item.name }}</span>
</div>
</div>
</div>
<!-- 工具-->
<div class="tool">
<div class="tool-title">
<div class="tt-title">工具</div>
</div>
<div class="tool-content">
<el-row :gutter="10">
<el-col
v-for="(item,index) in toolList"
:key="index"
:span="8"
class="tc-child"
>
<div style="padding: 5px 0">
<img :src="item.img" class="tc-img">
</div>
</el-col>
</el-row>
</div>
</div>
</div>
</div>
</template>
......@@ -19,7 +207,58 @@ export default {
},
data() {
return {
toolList: [
{ img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', name: '石家庄政务服务' },
{ img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', name: '石家庄政务服务' },
{ img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', name: '石家庄政务服务' },
{ img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', name: '石家庄政务服务' }
],
oneclickServiceList: [
{ img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', name: '石家庄政务服务' },
{ img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', name: '石家庄政务服务' },
{ img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', name: '石家庄政务服务' },
{ img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', name: '石家庄政务服务' },
{ img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', name: '石家庄政务服务' },
{ img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', name: '石家庄政务服务' },
{ img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', name: '石家庄政务服务' },
{ img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', name: '石家庄政务服务' },
{ img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', name: '石家庄政务服务' },
{ img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', name: '石家庄政务服务' },
{ img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', name: '石家庄政务服务' },
{ img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', name: '石家庄政务服务' }
],
choseType: '政务服务',
Typelist: [
{ name: '政务服务' },
{ name: '金融服务' },
{ name: '人才服务' },
{ name: '市场监督' },
{ name: '板块服务' }
],
value: new Date(),
activityInfoList: [
{ title: '关于举办2022年石家庄工业园区企业信用修复培训班的通知', date: '2022/08/30', address: '线上' },
{ title: '关于举办2022年石家庄工业园区企业信用修复培训班的通知', date: '2022/08/30', address: '线上' },
{ title: '关于举办2022年石家庄工业园区企业信用修复培训班的通知', date: '2022/08/30', address: '石家庄报告厅' },
{ title: '关于举办2022年石家庄工业园区企业信用修复培训班的通知', date: '2022/08/30', address: '线上' },
{ title: '关于举办2022年石家庄工业园区企业信用修复培训班的通知', date: '2022/08/30', address: '石家庄工业园区企业发展服务中心路演大厅' },
{ title: '关于举办2022年石家庄工业园区企业信用修复培训班的通知', date: '2022/08/30', address: '线上' }
],
serviceList: [
{ title: '检验检测服务', background: '', name: '石家庄华全联合测试技术有限公司' },
{ title: '知识产权服务', background: '', name: '石家庄东方专利商标代理有限公司' },
{ title: '科技咨询服务', background: '', name: '石家庄中科院产业技术创新与育成中心' }
],
defaultUrl: require('@/assets/image/profile.jpg'), // 默认头像
reportTodayList: [
{ value: '关于印发2022年度石家庄市重大版权推广运用计划项目指南和石家庄优秀版权奖的通知' },
{ value: '关于印发2022年度石家庄市重大版权推广运用计划项目指南和' },
{ value: '关于印发2022年度石家庄市重大版权推广运用计划项目指南和石家庄优秀版权奖的通知' },
{ value: '关于印发2022年度石家庄市重大版权推广运用计划项目指南和石家庄优秀版权奖的通知' },
{ value: '关于印发2022年度石家庄市重大版权推广运用计划项目指南和' },
{ value: '关于印发2022年度石家庄市重大版权推广运用计划项目指南和石家庄优秀版权奖的通知' },
{ value: '关于印发2022年度石家庄市重大版权推广运用计划项目指南和' }
]
}
},
computed: {
......@@ -35,10 +274,256 @@ export default {
]
return navArray
}
},
methods: {
changeType(item) {
this.choseType = item.name
}
}
}
</script>
<style scoped>
<style scoped lang="scss">
.home-content{
padding: 25px 120px;
.tool{
.tool-content{
.tc-child{
.tc-img{
width: 390px;
height: 150px
}
}
}
.tool-title{
background-color: #C4DCF6;
margin-bottom: 10px;
padding: 10px;
display: flex;
justify-content: space-between;
.tt-title{
font-size: 22px;
font-weight: bold;
color: #018FD6;
}
}
}
.oneClick-service{
padding-top: 10px;
.oneClick-service-content{
.os-card{
width: 250px;
height: 100px;
padding: 20px;
border: 1px solid #d6d6d6;
margin: 15px;
display: inline-flex;
align-items: center;
.os-img{
width: 70px;
height: 70px
}
}
}
.oneClick-service-title{
background-color: #C4DCF6;
margin-bottom: 10px;
//padding: 10px;
display: flex;
justify-content: space-between;
.os-title{
padding: 10px;
font-size: 22px;
font-weight: bold;
color: #018FD6;
}
.os-more{
float: right;
.sf-menu {
overflow: hidden;
list-style: none;
font-size: 19px;
color: #333333;
padding: 0;
display: flex;
margin: 0 auto;
justify-content: flex-start;
.sf-menu-item {
cursor: pointer;
display: block;
letter-spacing: 1px;
font-weight: 500;
float: left;
height: 50px;
line-height: 50px;
padding: 0 25px;
color: black;
width: 149px;
text-align: center;
}
.sf-menu-item:not(:last-of-type){
border-right: 1px solid rgba(255, 255, 255, 0.7490196078431373);
}
.sf-menu-item.sf-menu-item__active {
background: #21ADF3;
color: #FFFFFF;
font-weight: bold;
}
}
}
}
}
.activity-info{
padding: 10px 0 0 0;
::v-deep.el-calendar-table .el-calendar-day{
height: 50px!important;
}
.activity-info-content{
.aic-child{
padding: 5px 5px;
.card{
background-color: #d6d6d6;
padding: 3px;
.card-content{
font-size: 14px;
display: flex;
justify-content: space-between;
padding: 15px 0 5px 0;
}
}
}
}
.activity-info-title{
padding-bottom: 10px;
display: flex;
justify-content: space-between;
.ai-title{
font-size: 22px;
font-weight: bold;
color: #018FD6;
}
.ai-more{
color: #018FD6;
cursor: pointer;
display: flex;
float: right;
font-size: 15px;
}
}
}
.content-service{
padding: 10px 0 0 0;
.service-card{
.sc-child{
height: 140px;
background-color: #d6d6d6;
.sc-title{
padding: 10px;
float: right;
}
}
.sc-name{
padding: 10px;
border: 1px solid #018FD6;
text-align: center;
}
}
.content-service-title{
background-color: #C4DCF6;
margin-bottom: 10px;
padding: 10px;
display: flex;
justify-content: space-between;
.cs-title{
font-size: 22px;
font-weight: bold;
color: #018FD6;
}
.cs-more{
color: #018FD6;
cursor: pointer;
display: flex;
float: right;
font-size: 15px;
}
}
}
.content-top{
.user-info{
background-color: #d6d6d6;
.userInfo-content{
.login-btn{
padding: 0!important;
width: 165px;
height: 25px;
}
.info{
padding: 5px 5px;
}
}
.userInfo-top{
text-align: center;
.el-divider--horizontal{
margin: 10px 0;
}
}
padding: 10px;
}
.reportToday{
.reportToday-content{
.reportToday-contentChild{
cursor: pointer;
padding: 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;// div不换行属性
}
}
.reportToday-title{
padding-bottom: 10px;
display: flex;
justify-content: space-between;
.rt-title{
font-size: 22px;
font-weight: bold;
color: #018FD6;
}
.rt-more{
color: #018FD6;
cursor: pointer;
display: flex;
float: right;
margin-right:10px;
font-size: 15px;
}
}
}
.top-retrieval{
border: 1px solid #d6d6d6;
background-color: #d6d6d6;
.text{
font-size: 20px;
padding: 15px 20px;
}
.button{
padding: 15px 20px;
}
}
.top-left-down{
padding-top: 10px;
.tld-retrieval{
border: 1px solid #d6d6d6;
background-color: #d6d6d6;
padding: 17px 0;
.tld-text{
font-size: 19px;
padding: 15px 20px;
}
.tld-button{
padding: 15px 20px;
}
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment