|
|
@@ -0,0 +1,696 @@
|
|
|
+page {
|
|
|
+ background: #f4f8dc;
|
|
|
+ color: #193524;
|
|
|
+}
|
|
|
+
|
|
|
+.page {
|
|
|
+ min-height: 100vh;
|
|
|
+ padding-bottom: 152rpx;
|
|
|
+ background:
|
|
|
+ linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0, rgba(244, 248, 220, 0) 360rpx),
|
|
|
+ #f4f8dc;
|
|
|
+}
|
|
|
+
|
|
|
+.navbar {
|
|
|
+ position: relative;
|
|
|
+ z-index: 20;
|
|
|
+ height: 88rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-left: 24rpx;
|
|
|
+ padding-right: 196rpx;
|
|
|
+ background: rgba(255, 255, 255, 0.92);
|
|
|
+ box-shadow: 0 1rpx 0 rgba(18, 78, 42, 0.08);
|
|
|
+}
|
|
|
+
|
|
|
+.navbar-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ min-width: 128rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.navbar-loc-text {
|
|
|
+ margin: 0 4rpx 0 6rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #183c25;
|
|
|
+}
|
|
|
+
|
|
|
+.navbar-title {
|
|
|
+ position: absolute;
|
|
|
+ left: 156rpx;
|
|
|
+ right: 196rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #111812;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+
|
|
|
+.navbar-right {
|
|
|
+ width: 1rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.hero {
|
|
|
+ position: relative;
|
|
|
+ height: 430rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ background: #dcefb7;
|
|
|
+}
|
|
|
+
|
|
|
+.hero-img,
|
|
|
+.video-cover {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.hero-shade {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ height: 230rpx;
|
|
|
+ background: linear-gradient(180deg, rgba(16, 72, 43, 0) 0%, rgba(9, 55, 29, 0.72) 100%);
|
|
|
+}
|
|
|
+
|
|
|
+.hero-copy {
|
|
|
+ position: absolute;
|
|
|
+ left: 28rpx;
|
|
|
+ right: 28rpx;
|
|
|
+ bottom: 72rpx;
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+.hero-kicker {
|
|
|
+ display: inline-flex;
|
|
|
+ padding: 8rpx 18rpx;
|
|
|
+ border-radius: 999rpx;
|
|
|
+ background: rgba(255, 248, 192, 0.88);
|
|
|
+ color: #0b7a3c;
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+
|
|
|
+.hero-title {
|
|
|
+ display: block;
|
|
|
+ margin-top: 18rpx;
|
|
|
+ font-size: 42rpx;
|
|
|
+ line-height: 1.2;
|
|
|
+ font-weight: 800;
|
|
|
+ text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.28);
|
|
|
+}
|
|
|
+
|
|
|
+.hero-desc {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ align-items: baseline;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: rgba(255, 255, 255, 0.9);
|
|
|
+}
|
|
|
+
|
|
|
+.hero-desc-sep {
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.hero-desc-right {
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+
|
|
|
+.school-panel {
|
|
|
+ position: relative;
|
|
|
+ z-index: 3;
|
|
|
+ margin: -48rpx 20rpx 0;
|
|
|
+ padding: 34rpx 24rpx 28rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ background: rgba(255, 255, 255, 0.96);
|
|
|
+ box-shadow: 0 16rpx 42rpx rgba(38, 90, 45, 0.12);
|
|
|
+}
|
|
|
+
|
|
|
+.school-badge {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: -52rpx;
|
|
|
+ width: 104rpx;
|
|
|
+ height: 104rpx;
|
|
|
+ margin-left: -52rpx;
|
|
|
+ padding: 8rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0 8rpx 24rpx rgba(11, 122, 60, 0.18);
|
|
|
+}
|
|
|
+
|
|
|
+.badge-ring {
|
|
|
+ width: 88rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 4rpx solid #0b7a3c;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: #faffdf;
|
|
|
+}
|
|
|
+
|
|
|
+.school-name {
|
|
|
+ margin-top: 32rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 38rpx;
|
|
|
+ line-height: 1.25;
|
|
|
+ font-weight: 800;
|
|
|
+ color: #101711;
|
|
|
+}
|
|
|
+
|
|
|
+.school-meta {
|
|
|
+ margin-top: 18rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 8rpx 18rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #798777;
|
|
|
+}
|
|
|
+
|
|
|
+.school-tags {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
|
+ gap: 10rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.school-tag {
|
|
|
+ min-height: 44rpx;
|
|
|
+ padding: 7rpx 10rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ background: #e8ef38;
|
|
|
+ color: #076636;
|
|
|
+ font-size: 20rpx;
|
|
|
+ line-height: 30rpx;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.quick-panel {
|
|
|
+ margin: 20rpx 20rpx 0;
|
|
|
+ padding: 22rpx 8rpx 6rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(3, 1fr);
|
|
|
+ box-shadow: 0 10rpx 30rpx rgba(35, 91, 42, 0.08);
|
|
|
+}
|
|
|
+
|
|
|
+.quick-item {
|
|
|
+ min-width: 0;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.quick-icon {
|
|
|
+ width: 74rpx;
|
|
|
+ height: 74rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 2rpx solid #0b7a3c;
|
|
|
+ background: linear-gradient(135deg, #fbffe6, #f1f76a);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.quick-icon-1,
|
|
|
+.quick-icon-5 {
|
|
|
+ background: linear-gradient(135deg, #f5ffe1, #bee7df);
|
|
|
+}
|
|
|
+
|
|
|
+.quick-icon-2,
|
|
|
+.quick-icon-6 {
|
|
|
+ background: linear-gradient(135deg, #fff7c4, #d9ef5a);
|
|
|
+}
|
|
|
+
|
|
|
+.quick-name {
|
|
|
+ margin-top: 12rpx;
|
|
|
+ max-width: 200rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #3e493f;
|
|
|
+ line-height: 1.25;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.notice-banner {
|
|
|
+ margin: 28rpx 20rpx 0;
|
|
|
+ height: 82rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ overflow: hidden;
|
|
|
+ background:
|
|
|
+ linear-gradient(110deg, rgba(250, 232, 62, 0.94) 0%, rgba(245, 255, 202, 0.94) 43%, rgba(164, 223, 151, 0.94) 100%),
|
|
|
+ #eef7c9;
|
|
|
+ box-shadow: 0 8rpx 22rpx rgba(62, 116, 39, 0.12);
|
|
|
+}
|
|
|
+
|
|
|
+.notice-mark {
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ font-size: 34rpx;
|
|
|
+ line-height: 1;
|
|
|
+ font-weight: 900;
|
|
|
+ color: #0b7a3c;
|
|
|
+}
|
|
|
+
|
|
|
+.notice-content {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+ margin: 0 18rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #286039;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+
|
|
|
+.notice-action {
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-right: 14rpx;
|
|
|
+ padding: 12rpx 24rpx;
|
|
|
+ border-radius: 999rpx;
|
|
|
+ background: #0b7a3c;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+
|
|
|
+.section-head {
|
|
|
+ margin: 36rpx 20rpx 18rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.section-between {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.section-title {
|
|
|
+ font-size: 34rpx;
|
|
|
+ line-height: 1.12;
|
|
|
+ font-weight: 800;
|
|
|
+ color: #0b7a3c;
|
|
|
+}
|
|
|
+
|
|
|
+.section-desc {
|
|
|
+ margin-top: 6rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #87937f;
|
|
|
+}
|
|
|
+
|
|
|
+.more {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #88947f;
|
|
|
+ font-size: 22rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.admission-scroll {
|
|
|
+ width: 100%;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.admission-row {
|
|
|
+ display: inline-flex;
|
|
|
+ padding: 0 20rpx 4rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.admission-card {
|
|
|
+ width: 306rpx;
|
|
|
+ margin-right: 18rpx;
|
|
|
+ border-radius: 14rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0 10rpx 26rpx rgba(35, 91, 42, 0.09);
|
|
|
+}
|
|
|
+
|
|
|
+.admission-head {
|
|
|
+ min-height: 86rpx;
|
|
|
+ padding: 18rpx 18rpx 14rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: space-between;
|
|
|
+ background:
|
|
|
+ linear-gradient(165deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 45%),
|
|
|
+ #edf043;
|
|
|
+}
|
|
|
+
|
|
|
+.admission-name {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 800;
|
|
|
+ color: #111811;
|
|
|
+}
|
|
|
+
|
|
|
+.admission-label {
|
|
|
+ margin-top: 4rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: rgba(17, 24, 17, 0.58);
|
|
|
+}
|
|
|
+
|
|
|
+.bell {
|
|
|
+ width: 44rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: rgba(255, 255, 255, 0.48);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.admission-list {
|
|
|
+ padding: 4rpx 18rpx 2rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.admission-item,
|
|
|
+.news-item {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+
|
|
|
+.admission-item {
|
|
|
+ margin-top: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.line-dot {
|
|
|
+ width: 10rpx;
|
|
|
+ height: 10rpx;
|
|
|
+ margin: 10rpx 14rpx 0 0;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #0b7a3c;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.article-body {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.article-date {
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #8c9688;
|
|
|
+}
|
|
|
+
|
|
|
+.article-title {
|
|
|
+ margin-top: 5rpx;
|
|
|
+ color: #2c322e;
|
|
|
+ font-size: 25rpx;
|
|
|
+ line-height: 1.35;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+
|
|
|
+.card-foot {
|
|
|
+ height: 58rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 4rpx;
|
|
|
+ background: #f5f6ef;
|
|
|
+ color: #83907d;
|
|
|
+ font-size: 22rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.college-grid {
|
|
|
+ margin: 0 20rpx;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
|
+ gap: 18rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.college-card {
|
|
|
+ position: relative;
|
|
|
+ min-height: 208rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 20rpx 18rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0 10rpx 24rpx rgba(35, 91, 42, 0.08);
|
|
|
+}
|
|
|
+
|
|
|
+.building-lines {
|
|
|
+ position: absolute;
|
|
|
+ right: -14rpx;
|
|
|
+ bottom: -10rpx;
|
|
|
+ width: 180rpx;
|
|
|
+ height: 112rpx;
|
|
|
+ opacity: 0.22;
|
|
|
+ background:
|
|
|
+ linear-gradient(#93cf8d 0 0) 0 88rpx / 180rpx 4rpx no-repeat,
|
|
|
+ repeating-linear-gradient(90deg, transparent 0 21rpx, #93cf8d 22rpx 24rpx),
|
|
|
+ repeating-linear-gradient(0deg, transparent 0 25rpx, #93cf8d 26rpx 28rpx);
|
|
|
+}
|
|
|
+
|
|
|
+.college-head {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.college-icon {
|
|
|
+ width: 42rpx;
|
|
|
+ height: 42rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #0b7a3c;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.college-name {
|
|
|
+ min-width: 0;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ color: #222a23;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 800;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+
|
|
|
+.college-tags {
|
|
|
+ position: relative;
|
|
|
+ margin-top: 18rpx;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
|
+ gap: 9rpx 16rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.college-tag {
|
|
|
+ justify-self: start;
|
|
|
+ max-width: 100%;
|
|
|
+ padding: 6rpx 10rpx;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ background: #eef5a4;
|
|
|
+ color: #0b7a3c;
|
|
|
+ font-size: 20rpx;
|
|
|
+ line-height: 28rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.videos-grid {
|
|
|
+ margin: 0 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.video-card {
|
|
|
+ border-radius: 16rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0 12rpx 30rpx rgba(35, 91, 42, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.video-player {
|
|
|
+ width: 100%;
|
|
|
+ height: 380rpx;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.scenery-grid {
|
|
|
+ margin: 0 20rpx;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
|
+ gap: 18rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.scenery-card {
|
|
|
+ position: relative;
|
|
|
+ height: 176rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 14rpx;
|
|
|
+ box-shadow: 0 8rpx 20rpx rgba(35, 91, 42, 0.12);
|
|
|
+}
|
|
|
+
|
|
|
+/* 卡1 银杏大道：暖金天 + 金黄山丘 */
|
|
|
+.scenery-card-0 {
|
|
|
+ background: linear-gradient(180deg, #ffe9a8 0%, #ffd977 100%);
|
|
|
+}
|
|
|
+
|
|
|
+.scenery-card-0 .scenery-hill-a {
|
|
|
+ background: #f4b942;
|
|
|
+}
|
|
|
+
|
|
|
+.scenery-card-0 .scenery-hill-b {
|
|
|
+ background: #e39a2d;
|
|
|
+}
|
|
|
+
|
|
|
+/* 卡2 教学楼：青蓝天 + 墨绿山丘 */
|
|
|
+.scenery-card-1 {
|
|
|
+ background: linear-gradient(180deg, #cdeaf5 0%, #9ed3e8 100%);
|
|
|
+}
|
|
|
+
|
|
|
+.scenery-card-1 .scenery-hill-a {
|
|
|
+ background: #4d9e7f;
|
|
|
+}
|
|
|
+
|
|
|
+.scenery-card-1 .scenery-hill-b {
|
|
|
+ background: #2f7d63;
|
|
|
+}
|
|
|
+
|
|
|
+/* 卡3 智慧教室：淡紫天 + 蓝紫山丘 */
|
|
|
+.scenery-card-2 {
|
|
|
+ background: linear-gradient(180deg, #e4dcf6 0%, #c3b4ea 100%);
|
|
|
+}
|
|
|
+
|
|
|
+.scenery-card-2 .scenery-hill-a {
|
|
|
+ background: #7a6fc9;
|
|
|
+}
|
|
|
+
|
|
|
+.scenery-card-2 .scenery-hill-b {
|
|
|
+ background: #5d54a8;
|
|
|
+}
|
|
|
+
|
|
|
+/* 卡4 林荫大道：晨雾绿 + 深绿山丘 */
|
|
|
+.scenery-card-3 {
|
|
|
+ background: linear-gradient(180deg, #d8f0c8 0%, #a9dba2 100%);
|
|
|
+}
|
|
|
+
|
|
|
+.scenery-card-3 .scenery-hill-a {
|
|
|
+ background: #59a86b;
|
|
|
+}
|
|
|
+
|
|
|
+.scenery-card-3 .scenery-hill-b {
|
|
|
+ background: #3a8a4e;
|
|
|
+}
|
|
|
+
|
|
|
+/* 有 img 时显示真图，覆盖卡片背景 */
|
|
|
+.scenery-img {
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+/* 太阳：右上角圆 */
|
|
|
+.scenery-sun {
|
|
|
+ position: absolute;
|
|
|
+ right: 18rpx;
|
|
|
+ top: 14rpx;
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: rgba(255, 255, 255, 0.75);
|
|
|
+ box-shadow: 0 0 0 10rpx rgba(255, 255, 255, 0.25);
|
|
|
+}
|
|
|
+
|
|
|
+/* 山丘：两个错位的椭圆叠出层次 */
|
|
|
+.scenery-hill {
|
|
|
+ position: absolute;
|
|
|
+ border-radius: 50%;
|
|
|
+}
|
|
|
+
|
|
|
+.scenery-hill-a {
|
|
|
+ left: -30%;
|
|
|
+ bottom: -52rpx;
|
|
|
+ width: 110%;
|
|
|
+ height: 110rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.scenery-hill-b {
|
|
|
+ right: -35%;
|
|
|
+ bottom: -70rpx;
|
|
|
+ width: 120%;
|
|
|
+ height: 128rpx;
|
|
|
+ opacity: 0.9;
|
|
|
+}
|
|
|
+
|
|
|
+.scenery-overlay {
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0) 40%, rgba(20, 60, 35, 0.28) 100%);
|
|
|
+}
|
|
|
+
|
|
|
+.scenery-icon {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ margin-left: -28rpx;
|
|
|
+ margin-top: -44rpx;
|
|
|
+ text-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.18);
|
|
|
+}
|
|
|
+
|
|
|
+.scenery-name {
|
|
|
+ position: absolute;
|
|
|
+ left: 18rpx;
|
|
|
+ bottom: 12rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 25rpx;
|
|
|
+ font-weight: 800;
|
|
|
+ text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.28);
|
|
|
+}
|
|
|
+
|
|
|
+.tabbar {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 38;
|
|
|
+ min-height: 98rpx;
|
|
|
+ padding-bottom: constant(safe-area-inset-bottom);
|
|
|
+ padding-bottom: env(safe-area-inset-bottom);
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(3, 1fr);
|
|
|
+ background: rgba(255, 255, 255, 0.97);
|
|
|
+ box-shadow: 0 -8rpx 24rpx rgba(22, 58, 29, 0.08);
|
|
|
+}
|
|
|
+
|
|
|
+.tabbar-item {
|
|
|
+ position: relative;
|
|
|
+ padding-top: 12rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ color: #9aa39a;
|
|
|
+ font-size: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.tabbar-item text {
|
|
|
+ margin-top: 4rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.tabbar-active {
|
|
|
+ color: #0b7a3c;
|
|
|
+ font-weight: 800;
|
|
|
+}
|
|
|
+
|
|
|
+.tabbar-active::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 5rpx;
|
|
|
+ width: 52rpx;
|
|
|
+ height: 6rpx;
|
|
|
+ border-radius: 999rpx;
|
|
|
+ background: #e8ef38;
|
|
|
+}
|
zys