diff --git a/src/project/wuxi/AppCircle/AppCircle.vue b/src/project/wuxi/AppCircle/AppCircle.vue
index f35c343..eda0475 100644
--- a/src/project/wuxi/AppCircle/AppCircle.vue
+++ b/src/project/wuxi/AppCircle/AppCircle.vue
@@ -8,8 +8,8 @@
社区
-
我的贴子
-
{{ total }}
+
我的贴子
+
{{ item.createUserName }}
- {{ item.publishDepartName }}
+
+ {{ item.createTime }}
#【{{ item.topicName }}】
+ @click.stop="$linkTo('./TopicDetail?themeId=' + item.themeId + '&name=' + item.topicName)">#{{ item.topicName }}
{{ item.content }}
- {{ item.createTime }}
+ {{ item.publishDepartName }}
-
+
{{ item.appreciateCount }}
-
+
{{ item.commentCount }}
@@ -68,7 +69,7 @@
-
+
@@ -405,8 +406,10 @@
& > p {
margin: 12px 0;
- font-size: 28px;
- color: #333333;
+ font-family: PingFangSC-Regular;
+ font-size: 26px;
+ color: #999;
+ line-height: 36px;
}
.item-bottom {
@@ -480,7 +483,7 @@
position: relative;
height: 100px;
line-height: 100px;
- color: #fff;
+ color: #222;
font-size: 30px;
&:first-child {
@@ -496,9 +499,9 @@
bottom: 12px;
left: 50%;
width: 40px;
- height: 6px;
- border-radius: 3px;
- background: #fff;
+ height: 8px;
+ background: #026AF2;
+ border-radius: 4px;
transform: translateX(-50%);
content: ' ';
}
@@ -514,28 +517,39 @@
top: -6px;
right: 0;
z-index: 11;
- height: 24px;
- line-height: 24px;
- padding: 0 10px;
- font-size: 16px;
- color: #4181FF;
+ width: 16px;
+ height: 16px;
border-radius: 50%;
- border: 2px solid #4181FF;
- background: #fff;
- box-sizing: border-box;
- transform: translateX(50%);
+ background: #FF4747;
+ // height: 24px;
+ // line-height: 24px;
+ // padding: 0 10px;
+ // font-size: 16px;
+ // color: #4181FF;
+ // border-radius: 50%;
+ // border: 2px solid #4181FF;
+ // background: #fff;
+ // box-sizing: border-box;
+ // transform: translateX(50%);
}
span {
display: block;
- width: 120px;
- height: 60px;
- line-height: 60px;
- text-align: center;
- color: #fff;
+ font-family: PingFangSC-Regular;
font-size: 24px;
- border-radius: 10px;
- border: 1px solid #fff;
+ color: #333;
+ line-height: 54px;
+ text-align: center;
+ width: 164px;
+ height: 56px;
+ border: 1px solid #8A929F;
+ border-radius: 28px;
+ img {
+ display: inline-block;
+ width: 24px;
+ height: 24px;
+ vertical-align: middle;
+ }
}
}
}
diff --git a/src/project/wuxi/AppHome/AppHome.vue b/src/project/wuxi/AppHome/AppHome.vue
index e2e8f75..dc40331 100644
--- a/src/project/wuxi/AppHome/AppHome.vue
+++ b/src/project/wuxi/AppHome/AppHome.vue
@@ -1,17 +1,131 @@
-
-
-
-
请输入需要搜索的内容
+
-
-
![]()
-
-
+
+
居民惠
+
更多
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
生活缴费
+
+
+
+
天气预报
+
+
+
+
网上办事
+
+
+
+
招工就业
+
+
+
+
便民利
+
更多
+
+
+
+
+
+
功德银行
+
行好事
+
得积分
+
去兑换
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
城市智
+
更多
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
随手拍
+
+
+
+
随心问
+
+
+
+
热点话题
+
+
+
+
便民通讯录
+
+
+
+
+
+
+
{
- this.getSwiperList();
+ // this.getSwiperList();
this.getName();
this.getGrids();
this.getActive();
@@ -252,72 +362,223 @@ export default {
.page {
width: 100%;
min-height: 100%;
- background-color: #F3F6F9;
+ background-color: #fff;
position: relative;
- .search-wrap {
- width: 750px;
- height: 112px;
- box-sizing: border-box;
- padding: 0 32px;
- display: flex;
- align-items: center;
- justify-content: center;
- background-color: #4181FF;
-
- .search {
- width: 100%;
- height: 64px;
- background: #000000;
- border-radius: 32px;
- opacity: 0.2;
+ .header-content {
+ background: url('https://cdn.cunwuyun.cn/wechat/wuxi/home-weather1.png') center;
+ background-size: 100% 100%;
+ // position: fixed;
+ // top: 0;
+ // left: 0;
+ // z-index: 99;
+ // width: 100%;
+ .weather-info {
+ font-family: PingFangSC-Regular;
+ font-weight: 400;
+ font-size: 28px;
+ color: #222;
+ padding: 12px 34px;
+ img {
+ width: 56px;
+ height: 52px;
+ margin-right: 12px;
+ vertical-align: middle;
+ }
+ }
+ .swiper-content {
+ width: 686px;
+ height: 364px;
+ margin: 20px auto 24px;
+ }
+ ::v-deep .notice {
+ width: 686px;
+ height: 88px;
box-sizing: border-box;
- padding: 0 32px;
+ padding: 0 24px;
+ margin: 0 auto;
+ background: #FFFFFF;
+ box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
+ border-radius: 16px;
display: flex;
align-items: center;
+ justify-content: center;
- .desc {
- font-size: 28px;
- color: #FFFFFF;
- margin-left: 16px;
+ & > img {
+ width: 128px;
+ height: 52px;
+ }
+
+ .u-news-item {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
}
}
}
- .area-content {
- height: 96px;
- line-height: 96px;
- background-color: #2d80fb;
-
- .area-ai {
- display: block;
- width: 200px;
- margin-left: 34px;
- text-align: left;
+ .title-content {
+ display: flex;
+ justify-content: space-between;
+ padding: 32px;
+ line-height: 40px;
+ h2 {
+ font-family: PingFangSC-Medium;
+ font-weight: 500;
+ font-size: 34px;
+ color: #222;
}
-
- .picker-location {
- text-align: left;
+ div {
+ font-family: PingFangSC-Regular;
+ font-size: 28px;
+ color: #687DA6;
+ img {
+ width: 32px;
+ height: 32px;
+ margin-left: 6px;
+ vertical-align: middle;
+ }
}
}
- .header-bg {
- width: 100%;
- height: 160px;
- background-color: #4181FF;
+ .banner-flex {
+ display: flex;
+ justify-content: space-between;
+ padding: 0 32px;
+ .item-banner {
+ width: calc(50% - 16px);
+ height: 160px;
+ position: relative;
+ img {
+ width: 100%;
+ height: 100%;
+ }
+ .banner-text {
+ position: absolute;
+ top: 26px;
+ left: 28px;
+ }
+ h2 {
+ font-family: PingFangSC-Medium;
+ font-weight: 500;
+ font-size: 30px;
+ line-height: 48px;
+ }
+ p {
+ font-family: PingFangSC-Regular;
+ font-size: 22px;
+ line-height: 32px;
+ }
+ }
+ .color-3872BC {
+ color: #3872BC;
+ }
+ .color-CE5A5A {
+ color: #CE5A5A;
+ }
+ .color-409681 {
+ color: #409681;
+ }
}
- .border {
- width: 100%;
- height: 40px;
+ .app-content {
+ padding: 48px 32px 32px;
+ display: flex;
+ .item-app {
+ // width: 104px;
+ text-align: center;
+ margin-right: 86px;
+ img {
+ width: 96px;
+ height: 96px;
+ }
+ p {
+ font-family: PingFangSC-Regular;
+ font-size: 26px;
+ color: #222;
+ text-align: center;
+ line-height: 36px;
+ margin-top: 16px;
+ }
+ }
+ .item-app:nth-of-type(4n) {
+ margin-right: 0;
+ }
}
- .swiper-content {
- width: 686px;
- height: 240px;
- margin: -176px auto 24px;
+ .banner-content {
+ display: flex;
+ padding: 0 32px;
+ .banner-left {
+ width: 322px;
+ height: 462px;
+ margin-right: 30px;
+ position: relative;
+ h2 {
+ font-family: PingFangSC-SNaNpxibold;
+ font-weight: 600;
+ font-size: 36px;
+ line-height: 48px;
+ margin-bottom: 4px;
+ }
+ p {
+ font-family: PingFangSC-Regular;
+ font-size: 22px;
+ line-height: 40px;
+ img {
+ width: 20px;
+ height: 20px;
+ margin-right: 8px;
+ }
+ }
+ }
+ .color-4C3FCD {
+ color: #4C3FCD;
+ }
+ .banner-right {
+ .item {
+ width: 334px;
+ height: 216px;
+ position: relative;
+ h2 {
+ font-family: PingFangSC-SNaNpxibold;
+ font-weight: 500;
+ font-size: 30px;
+ line-height: 48px;
+ margin-bottom: 4px;
+ }
+ p {
+ font-family: PingFangSC-Regular;
+ font-size: 22px;
+ line-height: 32px;
+ }
+ }
+ .item:nth-of-type(1) {
+ margin-bottom: 30px;
+ }
+ .color-DF863E {
+ color: #DF863E;
+ }
+ .color-D9606E {
+ color: #D9606E;
+ }
+ }
+ .banner-img {
+ width: 100%;
+ height: 100%;
+ }
+ .banner-text {
+ position: absolute;
+ top: 26px;
+ left: 28px;
+ }
+
}
+
+
+
+
.grid-content {
box-sizing: border-box;
@@ -336,32 +597,6 @@ export default {
}
}
}
-
- ::v-deep .notice {
- width: 686px;
- height: 88px;
- box-sizing: border-box;
- padding: 0 24px;
- margin: 30px auto 48px;
- background: #FFFFFF;
- box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
- border-radius: 16px;
- display: flex;
- align-items: center;
- justify-content: center;
-
- & > img {
- width: 128px;
- height: 52px;
- }
-
- .u-news-item {
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- }
- }
-
.list-wrap {
box-sizing: border-box;
padding: 32px;
diff --git a/src/project/wuxi/AppHome/openPage.vue b/src/project/wuxi/AppHome/openPage.vue
new file mode 100644
index 0000000..7bb56bb
--- /dev/null
+++ b/src/project/wuxi/AppHome/openPage.vue
@@ -0,0 +1,123 @@
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+