|
@@ -1,8 +1,8 @@
|
|
<template>
|
|
<template>
|
|
<div class="app-container home">
|
|
<div class="app-container home">
|
|
<el-row :gutter="20">
|
|
<el-row :gutter="20">
|
|
- <el-col :xs="12" :sm="12" :md="12" :lg="12">
|
|
|
|
- <el-carousel direction="vertical" height="350px" style="margin-bottom: 20px;">
|
|
|
|
|
|
+ <el-col :xs="24" :sm="24" :md="12" :lg="8">
|
|
|
|
+ <el-carousel direction="horizontal" height="250px" style="margin-bottom: 20px;">
|
|
<!-- 为了让走马灯在轮播图片的同时能够在上面附带文字,将走马灯组件单独放在一个 div 里
|
|
<!-- 为了让走马灯在轮播图片的同时能够在上面附带文字,将走马灯组件单独放在一个 div 里
|
|
并且为这个 div 单独设计 css 样式 pic_item -->
|
|
并且为这个 div 单独设计 css 样式 pic_item -->
|
|
<div class="pic_item">
|
|
<div class="pic_item">
|
|
@@ -13,59 +13,61 @@
|
|
</div>
|
|
</div>
|
|
</el-carousel>
|
|
</el-carousel>
|
|
</el-col>
|
|
</el-col>
|
|
- <el-col :xs="12" :sm="12" :md="12" :lg="12">
|
|
|
|
- <el-carousel direction="vertical" height="350px" style="margin-bottom: 20px;">
|
|
|
|
- <div class="pic_item">
|
|
|
|
- <el-carousel-item v-for="(item, index) in demeanorUrls" :key="index">
|
|
|
|
- <el-image :src="item.url" style="width: 100%; height: 100%;"></el-image>
|
|
|
|
- <h3>{{item.title}}</h3>
|
|
|
|
- </el-carousel-item>
|
|
|
|
|
|
+ <el-col :xs="24" :sm="24" :md="12" :lg="8">
|
|
|
|
+ <div class="title">
|
|
|
|
+ <div class="logo">
|
|
|
|
+ <img src="../assets/logo/logo.png" alt="logo" />
|
|
</div>
|
|
</div>
|
|
- </el-carousel>
|
|
|
|
|
|
+ 学习资料
|
|
|
|
+ </div>
|
|
|
|
+ <demeanor-chart />
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :xs="24" :sm="24" :md="12" :lg="8">
|
|
|
|
+ <div class="title">
|
|
|
|
+ <div class="logo">
|
|
|
|
+ <img src="../assets/logo/logo.png" alt="logo" />
|
|
|
|
+ </div>常用下载
|
|
|
|
+ </div>
|
|
|
|
+ <demeanor-chart />
|
|
</el-col>
|
|
</el-col>
|
|
|
|
+ <!--<el-col :xs="12" :sm="12" :md="12" :lg="12">-->
|
|
|
|
+ <!--<el-carousel direction="vertical" height="350px" style="margin-bottom: 20px;">-->
|
|
|
|
+ <!--<div class="pic_item">-->
|
|
|
|
+ <!--<el-carousel-item v-for="(item, index) in demeanorUrls" :key="index">-->
|
|
|
|
+ <!--<el-image :src="item.url" style="width: 100%; height: 100%;"></el-image>-->
|
|
|
|
+ <!--<h3>{{item.title}}</h3>-->
|
|
|
|
+ <!--</el-carousel-item>-->
|
|
|
|
+ <!--</div>-->
|
|
|
|
+ <!--</el-carousel>-->
|
|
|
|
+ <!--</el-col>-->
|
|
</el-row>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-row :gutter="20">
|
|
<el-col :xs="24" :sm="24" :md="12" :lg="8">
|
|
<el-col :xs="24" :sm="24" :md="12" :lg="8">
|
|
- <el-card>
|
|
|
|
- <div slot="header">
|
|
|
|
- <span class="title">
|
|
|
|
- 公示公告
|
|
|
|
- </span>
|
|
|
|
|
|
+ <div class="title">
|
|
|
|
+ <div class="logo">
|
|
|
|
+ <img src="../assets/logo/logo.png" alt="logo" />
|
|
</div>
|
|
</div>
|
|
- <div class="body">
|
|
|
|
- <div class="chart-wrapper">
|
|
|
|
- <notice-chart />
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </el-card>
|
|
|
|
|
|
+ 公示公告、工作提醒
|
|
|
|
+ </div>
|
|
|
|
+ <notice-chart />
|
|
</el-col>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :md="12" :lg="8">
|
|
<el-col :xs="24" :sm="24" :md="12" :lg="8">
|
|
- <el-card>
|
|
|
|
- <div slot="header">
|
|
|
|
- <span class="title">
|
|
|
|
- 先进风采
|
|
|
|
- </span>
|
|
|
|
- </div>
|
|
|
|
- <div class="body">
|
|
|
|
- <div class="chart-wrapper">
|
|
|
|
- <demeanor-chart />
|
|
|
|
- </div>
|
|
|
|
|
|
+ <div class="title">
|
|
|
|
+ <div class="logo">
|
|
|
|
+ <img src="../assets/logo/logo.png" alt="logo" />
|
|
</div>
|
|
</div>
|
|
- </el-card>
|
|
|
|
|
|
+ 先进风采
|
|
|
|
+ </div>
|
|
|
|
+ <demeanor-chart />
|
|
</el-col>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :md="12" :lg="8">
|
|
<el-col :xs="24" :sm="24" :md="12" :lg="8">
|
|
- <el-card>
|
|
|
|
- <div slot="header">
|
|
|
|
- <span class="title">
|
|
|
|
- 政治生日
|
|
|
|
- </span>
|
|
|
|
|
|
+ <div class="title">
|
|
|
|
+ <div class="logo">
|
|
|
|
+ <img src="../assets/logo/logo.png" alt="logo" />
|
|
</div>
|
|
</div>
|
|
- <div class="body">
|
|
|
|
- <div class="chart-wrapper">
|
|
|
|
- <brith-chart />
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </el-card>
|
|
|
|
|
|
+ 政治生日
|
|
|
|
+ </div>
|
|
|
|
+ <brith-chart />
|
|
</el-col>
|
|
</el-col>
|
|
</el-row>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
@@ -98,6 +100,7 @@ export default {
|
|
for (let i = 0; i < profiles.length; i++) {
|
|
for (let i = 0; i < profiles.length; i++) {
|
|
this.publicizeUrls.push({
|
|
this.publicizeUrls.push({
|
|
"url": process.env.VUE_APP_BASE_API + profiles[i].url,
|
|
"url": process.env.VUE_APP_BASE_API + profiles[i].url,
|
|
|
|
+ "url2": profiles[i].url2,
|
|
"title": profiles[i].title
|
|
"title": profiles[i].title
|
|
});
|
|
});
|
|
}
|
|
}
|
|
@@ -114,6 +117,9 @@ export default {
|
|
});
|
|
});
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ handleSee(url) {
|
|
|
|
+ window.open(process.env.VUE_APP_BASE_API + url);
|
|
|
|
+ },
|
|
}
|
|
}
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|
|
@@ -170,7 +176,19 @@ export default {
|
|
}
|
|
}
|
|
|
|
|
|
.title{
|
|
.title{
|
|
- font-size: 18px;
|
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ background-color: #F5222D;
|
|
|
|
+ color: white;
|
|
|
|
+ height: 32px;
|
|
|
|
+ line-height: 32px;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.logo{
|
|
|
|
+ height: 18px;
|
|
|
|
+ width: 18px;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ margin: 0px 10px 0px 10px;
|
|
}
|
|
}
|
|
|
|
|
|
.el-carousel__item h3 {
|
|
.el-carousel__item h3 {
|
|
@@ -228,7 +246,7 @@ img{
|
|
/* text-decoration-line: underline; */
|
|
/* text-decoration-line: underline; */
|
|
font-weight: 900;
|
|
font-weight: 900;
|
|
/*font-family:Georgia, 'Times New Roman', Times, serif;*/
|
|
/*font-family:Georgia, 'Times New Roman', Times, serif;*/
|
|
- font-size: 18px;
|
|
|
|
|
|
+ font-size: 14px;
|
|
line-height: 116%;
|
|
line-height: 116%;
|
|
display: flex;
|
|
display: flex;
|
|
align-items: center;
|
|
align-items: center;
|