diff --git a/src/images/bg8.png b/src/images/bg8.png new file mode 100644 index 0000000..7a12f98 Binary files /dev/null and b/src/images/bg8.png differ diff --git a/src/images/bottom1.png b/src/images/bottom1.png new file mode 100644 index 0000000..206ab08 Binary files /dev/null and b/src/images/bottom1.png differ diff --git a/src/images/card1.png b/src/images/card1.png new file mode 100644 index 0000000..9f1e9b5 Binary files /dev/null and b/src/images/card1.png differ diff --git a/src/images/icon12.png b/src/images/icon12.png new file mode 100644 index 0000000..e135032 Binary files /dev/null and b/src/images/icon12.png differ diff --git a/src/images/icon13.png b/src/images/icon13.png new file mode 100644 index 0000000..142d93f Binary files /dev/null and b/src/images/icon13.png differ diff --git a/src/images/icon14.png b/src/images/icon14.png new file mode 100644 index 0000000..821b061 Binary files /dev/null and b/src/images/icon14.png differ diff --git a/src/images/icon15.png b/src/images/icon15.png new file mode 100644 index 0000000..821b061 Binary files /dev/null and b/src/images/icon15.png differ diff --git a/src/images/icon17.png b/src/images/icon17.png new file mode 100644 index 0000000..5eb22a6 Binary files /dev/null and b/src/images/icon17.png differ diff --git a/src/images/icon18.png b/src/images/icon18.png new file mode 100644 index 0000000..6bdc85d Binary files /dev/null and b/src/images/icon18.png differ diff --git a/src/images/icon19.png b/src/images/icon19.png new file mode 100644 index 0000000..5a72f3d Binary files /dev/null and b/src/images/icon19.png differ diff --git a/src/images/icon20.png b/src/images/icon20.png new file mode 100644 index 0000000..e6c389e Binary files /dev/null and b/src/images/icon20.png differ diff --git a/src/images/icon21.png b/src/images/icon21.png new file mode 100644 index 0000000..b737d2d Binary files /dev/null and b/src/images/icon21.png differ diff --git a/src/images/none1.png b/src/images/none1.png new file mode 100644 index 0000000..5b2f005 Binary files /dev/null and b/src/images/none1.png differ diff --git a/src/images/none2.png b/src/images/none2.png new file mode 100644 index 0000000..a621c57 Binary files /dev/null and b/src/images/none2.png differ diff --git a/src/images/title2.png b/src/images/title2.png index f6c6107..2dca5ee 100644 Binary files a/src/images/title2.png and b/src/images/title2.png differ diff --git a/src/images/title3.png b/src/images/title3.png index 49dab3b..3bf0ab8 100644 Binary files a/src/images/title3.png and b/src/images/title3.png differ diff --git a/src/images/title4.png b/src/images/title4.png new file mode 100644 index 0000000..3cd58f4 Binary files /dev/null and b/src/images/title4.png differ diff --git a/src/images/title5.png b/src/images/title5.png new file mode 100644 index 0000000..c840e6e Binary files /dev/null and b/src/images/title5.png differ diff --git a/src/pages/home/index.scss b/src/pages/home/index.scss index 8dc5daf..716e074 100644 --- a/src/pages/home/index.scss +++ b/src/pages/home/index.scss @@ -3,11 +3,11 @@ page { } .page-title { - width: 320rpx; + width: 344rpx; height: 34rpx; } .page { - padding: 44rpx 40rpx; + padding: 44rpx 40rpx 0; .user { display: flex; align-items: center; @@ -15,8 +15,8 @@ page { flex-shrink: 0; padding: 0; margin: 0; - width: 124rpx; - height: 124rpx; + width: 108rpx; + height: 108rpx; outline: none; border: 2px solid #fff; border-radius: 50%; @@ -39,42 +39,461 @@ page { } .hostipal { margin-top: 16rpx; - line-height: 1; + line-height: 32rpx; font-size: 28rpx; - color: rgba(173, 172, 178, 1); + color: rgba(105, 104, 110, 1); .tag { margin-left: 10rpx; + height: 32rpx; display: inline-block; font-size: 24rpx; color: rgba(255, 255, 255, 1); - padding: 2rpx 10rpx; - background: #8c75d0; + padding: 0 10rpx; + background: rgba(195, 148, 255, 1); border-radius: 8rpx 8rpx 8rpx 8rpx; } } } } .banner { - margin-top: 32rpx; - padding: 40rpx; - border-radius: 24rpx; - border: 1px solid #fff; - background: linear-gradient(to right, rgba(223, 214, 250, 1), rgba(229, 227, 240, 1)); - .title { - font-size: 40rpx; - color: rgba(140, 117, 208, 1); - font-weight: bold; - text-align: center; + margin-top: 50rpx; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 30rpx; + .edc { + height: 384rpx; + box-shadow: 0 4rpx 40rpx rgba(119, 80, 234, 0.34); + border-radius: 32rpx; + .e-img { + width: 100%; + height: 100%; + } } - .btn { - margin: 16rpx auto 0; - padding: 8rpx 0; - width: 330rpx; - text-align: center; - font-size: 32rpx; - color: rgba(255, 255, 255, 1); - background-color: rgba(140, 117, 208, 1); - border-radius: 64rpx; + .v-swiper { + position: relative; + height: 384rpx; + border-radius: 32rpx; + .swiper-item { + border-radius: 32rpx; + background-color: #fff; + .item1 { + padding: 32rpx; + .i-header { + display: flex; + align-items: center; + justify-content: space-between; + .date { + .year { + font-size: 24rpx; + color: rgba(173, 172, 178, 1); + line-height: 32rpx; + } + .day { + display: flex; + align-items: baseline; + font-size: 36rpx; + color: rgba(173, 172, 178, 1); + line-height: 40rpx; + .sub { + font-size: 22rpx; + } + } + } + .icon { + width: 68rpx; + height: 68rpx; + } + } + .content { + margin-top: 28rpx; + font-size: 30rpx; + color: rgba(33, 29, 46, 1); + line-height: 56rpx; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + } + } + .item2 { + padding: 32rpx; + .i-header { + display: flex; + align-items: center; + justify-content: space-between; + .date { + .year { + font-size: 24rpx; + color: rgba(173, 172, 178, 1); + line-height: 32rpx; + } + .day { + display: flex; + align-items: baseline; + font-size: 36rpx; + color: rgba(173, 172, 178, 1); + line-height: 40rpx; + .sub { + font-size: 22rpx; + } + } + } + .icon { + width: 68rpx; + height: 68rpx; + } + } + .status1 { + margin-top: 38rpx; + font-size: 40rpx; + color: rgba(195, 49, 0, 1); + font-weight: bold; + display: flex; + align-items: center; + gap: 12rpx; + .s-icon { + width: 36rpx; + height: 36rpx; + } + } + .status2 { + margin-top: 38rpx; + font-size: 40rpx; + color: rgba(69, 163, 83, 1); + font-weight: bold; + display: flex; + align-items: center; + gap: 12rpx; + .s-icon { + width: 36rpx; + height: 36rpx; + } + } + .status3 { + margin-top: 38rpx; + font-size: 40rpx; + color: rgba(185, 130, 255, 1); + font-weight: bold; + display: flex; + align-items: center; + gap: 12rpx; + .s-icon { + width: 36rpx; + height: 36rpx; + } + } + .name { + margin-top: 44rpx; + font-size: 28rpx; + color: rgba(105, 104, 110, 1); + line-height: 44rpx; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + } + } + .item3 { + padding: 32rpx; + .i-header { + display: flex; + align-items: center; + justify-content: space-between; + .date { + .year { + font-size: 24rpx; + color: rgba(173, 172, 178, 1); + line-height: 32rpx; + } + .day { + display: flex; + align-items: baseline; + font-size: 36rpx; + color: rgba(173, 172, 178, 1); + line-height: 40rpx; + .sub { + font-size: 22rpx; + } + } + } + .icon { + width: 68rpx; + height: 68rpx; + } + } + .status4 { + margin-top: 38rpx; + font-size: 40rpx; + color: rgba(185, 130, 255, 1); + font-weight: bold; + display: flex; + align-items: center; + gap: 12rpx; + .s-icon { + width: 36rpx; + height: 36rpx; + } + } + .status2 { + margin-top: 38rpx; + font-size: 40rpx; + color: rgba(69, 163, 83, 1); + font-weight: bold; + display: flex; + align-items: center; + gap: 12rpx; + .s-icon { + width: 36rpx; + height: 36rpx; + } + } + .name { + margin-top: 44rpx; + font-size: 28rpx; + color: rgba(105, 104, 110, 1); + line-height: 44rpx; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + } + } + .item4 { + padding: 32rpx; + .i-header { + display: flex; + align-items: center; + justify-content: space-between; + .date { + .year { + font-size: 24rpx; + color: rgba(173, 172, 178, 1); + line-height: 32rpx; + } + .day { + display: flex; + align-items: baseline; + font-size: 36rpx; + color: rgba(173, 172, 178, 1); + line-height: 40rpx; + .sub { + font-size: 22rpx; + } + } + } + .icon { + width: 68rpx; + height: 68rpx; + } + } + .num-line { + display: flex; + align-items: baseline; + font-size: 72rpx; + color: rgba(185, 130, 255, 1); + font-weight: bold; + .sub { + font-size: 32rpx; + color: rgba(33, 29, 46, 1); + } + } + .name { + margin-top: 44rpx; + font-size: 28rpx; + color: rgba(105, 104, 110, 1); + line-height: 44rpx; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + } + } + + .item5 { + padding: 96rpx 22rpx 0; + .icon1 { + width: 276rpx; + height: 214rpx; + } + .title { + margin-top: -60rpx; + font-size: 32rpx; + color: rgba(173, 172, 178, 1); + display: flex; + align-items: center; + justify-content: center; + gap: 8rpx; + .icon2 { + width: 36rpx; + height: 36rpx; + } + } + } + } + .dots { + position: absolute; + bottom: 16rpx; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + gap: 8rpx; + .dot { + flex-shrink: 0; + width: 8rpx; + height: 8rpx; + border-radius: 50%; + background-color: rgba(231, 234, 236, 1); + transition: all 0.3s ease; + &.active { + width: 12rpx; + height: 12rpx; + background-color: rgba(195, 148, 255, 1); + } + } + } + } + } + .ad { + margin-top: 40rpx; + .swiper { + height: 224rpx; + .ad-img { + display: block; + width: 100%; + height: 224rpx; + border-radius: 24rpx; + box-shadow: 0 4rpx 22rpx 0 rgba(0, 0, 0, 0.03); + } + } + } + .briefing { + margin-top: 40rpx; + .b-header { + display: flex; + align-items: center; + justify-content: space-between; + .title { + width: 140rpx; + height: 44rpx; + } + .more { + font-size: 28rpx; + color: rgba(173, 172, 178, 1); + } + } + .scroll { + margin: 24rpx -40rpx 0; + padding-left: 40rpx; + overflow-x: auto; + display: flex; + flex-wrap: nowrap; + gap: 24rpx; + &::-webkit-scrollbar { + display: none; + } + .card { + flex-shrink: 0; + width: 304rpx; + height: 404rpx; + border-radius: 32rpx; + } + .none { + padding: 102rpx 12rpx 0; + flex-shrink: 0; + width: 304rpx; + background-color: #fff; + border-radius: 32rpx; + .icon { + display: block; + margin: 0 auto; + width: 276rpx; + height: 230rpx; + } + .content { + margin-top: -90rpx; + font-size: 32rpx; + color: rgba(173, 172, 178, 1); + line-height: 48rpx; + text-align: center; + } + } + } + } + .sop { + margin-top: 40rpx; + .s-header { + display: flex; + align-items: center; + justify-content: space-between; + .title { + width: 156rpx; + height: 44rpx; + } + .more { + font-size: 28rpx; + color: rgba(173, 172, 178, 1); + } + } + .scroll { + margin: 24rpx -40rpx 0; + padding-left: 40rpx; + overflow-x: auto; + display: flex; + flex-wrap: nowrap; + gap: 24rpx; + &::-webkit-scrollbar { + display: none; + } + .card { + flex-shrink: 0; + width: 304rpx; + .photo { + width: 100%; + height: 304rpx; + border-radius: 32rpx 32rpx 0 0; + } + .content { + padding: 20rpx; + height: 132rpx; + box-sizing: border-box; + background-color: #fff; + border-radius: 0 0 32rpx 32rpx; + .center { + font-size: 28rpx; + color: rgba(33, 29, 46, 1); + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + } + } + } + .none { + padding: 102rpx 12rpx 0; + flex-shrink: 0; + width: 304rpx; + background-color: #fff; + border-radius: 32rpx; + .icon { + display: block; + margin: 0 auto; + width: 276rpx; + height: 230rpx; + } + .content { + margin-top: -90rpx; + font-size: 32rpx; + color: rgba(173, 172, 178, 1); + line-height: 48rpx; + text-align: center; + } + } } } .message { @@ -107,31 +526,16 @@ page { } } } - .ad { - margin-top: 32rpx; - .swiper { - height: 224rpx; - .ad-img { - display: block; - width: 100%; - height: 224rpx; - border-radius: 24rpx; - box-shadow: 0 4rpx 22rpx 0 rgba(0, 0, 0, 0.03); - } - } - } .list { - margin-top: 32rpx; - padding: 32rpx 20rpx; - background-color: #fff; + margin-top: 40rpx; border-radius: 24rpx; .list-header { display: flex; align-items: center; justify-content: space-between; .title { - width: 146rpx; - height: 34rpx; + width: 140rpx; + height: 44rpx; } .more { font-size: 28rpx; @@ -140,17 +544,19 @@ page { } .card { margin: 24rpx 0 0; + padding: 32rpx; background-color: #fff; border-radius: 24rpx; display: flex; + gap: 24rpx; .photo { flex-shrink: 0; width: 176rpx; height: 176rpx; - border-radius: 12rpx; + border-radius: 24rpx; } .wrap { - padding: 12rpx 24rpx 0 24rpx; + padding-top: 12rpx; flex: 1; display: flex; flex-direction: column; @@ -198,5 +604,28 @@ page { } } } + .none { + margin-top: 28rpx; + padding: 32rpx; + border-radius: 32rpx; + background-color: #fff; + display: flex; + align-items: center; + gap: 46rpx; + .icon { + width: 176rpx; + height: 176rpx; + } + .content { + font-size: 32rpx; + color: rgba(173, 172, 178, 1); + } + } + } + .bottom { + margin: 56rpx auto 0; + display: block; + width: 234rpx; + height: 86rpx; } } diff --git a/src/pages/home/index.ts b/src/pages/home/index.ts index 24b3444..6039bf2 100644 --- a/src/pages/home/index.ts +++ b/src/pages/home/index.ts @@ -15,6 +15,8 @@ Page({ userInfo: {}, unReadMsgCount: 0, + current: 0, + bannerList: [], list: [] as any[], @@ -78,6 +80,12 @@ Page({ url: '/pages/message/index', }); }, + handleSwiperChange(e) { + console.log('DEBUGPRINT[89]: index.ts:83: e=', e); + this.setData({ + current: e.detail.current, + }); + }, getBanner() { wx.ajax({ method: 'GET', @@ -109,6 +117,7 @@ Page({ url: '?r=xd/doctor/index/get-latest-material', data: { page: newPage, + count: 3, }, }).then((res) => { res.list.forEach((item) => { diff --git a/src/pages/home/index.wxml b/src/pages/home/index.wxml index 456e9de..409fa55 100644 --- a/src/pages/home/index.wxml +++ b/src/pages/home/index.wxml @@ -4,7 +4,7 @@