diff --git a/pages.json b/pages.json index a799d00..3f816ba 100644 --- a/pages.json +++ b/pages.json @@ -8,16 +8,16 @@ "orientation": "landscape" // 设置为横屏 } - }, - { - "path": "pages/index/indexDark", - "style": { - "navigationStyle": "custom", - "orientation": "landscape" // 设置为横屏 - } - } // { + // "path": "pages/index/indexDark", + // "style": { + // "navigationStyle": "custom", + // "orientation": "landscape" // 设置为横屏 + // } + + // } + // { // "path": "pages/login/login", // "style": { // "navigationBarTitleText": "注册页" diff --git a/pages/index/index.vue b/pages/index/index.vue index 008baa0..15612b5 100644 --- a/pages/index/index.vue +++ b/pages/index/index.vue @@ -1,9 +1,9 @@ @@ -354,8 +489,9 @@ overflow: hidden; // background-repeat: no-repeat; } + //暗黑模式 - .darkbackgroundContainer{ + .darkbackgroundContainer { display: flex; position: relative; width: 100%; @@ -365,6 +501,7 @@ background-position: center center; overflow: hidden; } + .right-container { width: 100%; height: 100vh; @@ -374,7 +511,8 @@ height: 900rpx; margin-top: 50rpx; display: flex; - .right-container-right{ + + .right-container-right { margin-left: 2%; width: 40%; height: 900rpx; @@ -386,11 +524,34 @@ display: flex; // justify-content: center; flex-direction: column; + + .uni-margin-wrap { + margin-top: 200rpx; + width: 1200rpx; + // width: 100%; + + .swiper { + height: 900rpx; + + .swiper-item-flex { + display: flex; + } + + .swiper-item { + display: block; + height: 300rpx; + line-height: 300rpx; + text-align: center; + } + } + } + .time-tra { // margin-left: 150rpx; margin-top: 80rpx; height: 100%; width: 700rpx; + .time-button-view { display: flex; margin-top: 50rpx; @@ -422,6 +583,20 @@ font-size: 40rpx; box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3); } + + .time-button-end-dark { + width: 300rpx; + height: 100rpx; + border-radius: 50rpx; + display: flex; + justify-content: center; + align-items: center; + font-size: 40rpx; + box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3); + background: linear-gradient(to top, #6B87BA, #FFFFFF); + /* 渐变从下到上 */ + } + } .time-people { @@ -446,6 +621,17 @@ font-size: 100rpx; text-shadow: 0 -5rpx 5rpx; margin-bottom: 30rpx; + font-weight: 500; + } + + .time-font-dark { + font-size: 100rpx; + text-shadow: 0 -5rpx 5rpx; + margin-bottom: 30rpx; + background: linear-gradient(to bottom, #FFFFFF, #B2C8E2); + -webkit-background-clip: text; + color: transparent; + font-weight: 500; } .time-text { @@ -467,20 +653,24 @@ } } } - .right-container-right-down{ + + .right-container-right-down { width: 100%; height: 560rpx; display: flex; justify-content: center; align-items: center; - - .right-container-right-down-left{ + + .right-container-right-down-left { height: 100rpx; width: 100rpx; } - .right-container-right-down-card{ + + .right-container-right-down-card { + margin-left: 5rpx; + margin-right: 5rpx; margin-top: 80rpx; - width: 84%; + width: 99%; height: 650rpx; border-radius: 80rpx; // border: 1rpx solid ; @@ -491,7 +681,8 @@ // justify-content: center; // flex-direction: column; box-shadow: 2rpx 0 0 2rpx; - .right-container-right-down-card-line{ + + .right-container-right-down-card-line { width: 1px; /* 线条的宽度 */ height: 300rpx; @@ -501,39 +692,75 @@ margin-right: 30rpx; margin-top: 150rpx; } - .right-container-right-down-card-card{ + + .right-container-right-down-card-card { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 450rpx; - .right-container-right-down-card-img{ + position: relative; + + .right-container-right-down-card-card-type { + position: absolute; + top: 0rpx; + left: -25rpx; + width: 315rpx; + height: 104rpx; + } + + .right-container-right-down-card-card-font { + position: absolute; + top: 15rpx; + left: 95rpx; + font-size: 40rpx; + color: #414F6E; + } + + .right-container-right-down-card-img { width: 400rpx; height: 350rpx; } - .right-container-right-down-card-font{ + + .right-container-right-down-card-font { font-size: 50rpx; } + + .right-container-right-down-card-font-dark { + font-size: 50rpx; + color: #fff; + } } } - .right-container-right-down-right{ + + .right-container-right-down-right { height: 100rpx; width: 100rpx; } } + // align-items: center; - .right-container-right-title{ + .right-container-right-title { width: 100%; height: 170rpx; position: relative; - // background-color: red; - .right-container-right-text{ + + .right-container-right-text { line-height: 170rpx; font-size: 58rpx; font-weight: 600; margin-left: 120rpx; } - .right-container-right-img{ + + .right-container-right-text-dark { + line-height: 170rpx; + font-size: 58rpx; + font-weight: 600; + margin-left: 120rpx; + color: #fff; + } + + .right-container-right-img { position: absolute; top: 80rpx; right: 80rpx; @@ -542,6 +769,7 @@ } } } + .right-container-left { width: 55%; height: 900rpx; @@ -553,189 +781,283 @@ display: flex; justify-content: center; align-items: center; - .right-container-fir-left-card-main-right { - margin-left: 10rpx; - margin-right: 5rpx; - width: 70rpx; - height: 90rpx; + } + + .right-container-left-dark { + width: 55%; + height: 900rpx; + border-radius: 80rpx; + border: 1rpx solid #fff; + background-color: rgb(22, 48, 76); + /* 背景颜色 #f4f9ff，透明度 70% */ + position: relative; + display: flex; + justify-content: center; + align-items: center; + } + + .uni-margin-wrap { + width: 1300rpx; + // width: 100%; + + .swiper { + height: 700rpx; + + .swiper-item-flex { + display: flex; + } + + .swiper-item { + display: block; + height: 300rpx; + line-height: 300rpx; + text-align: center; + } } - - .right-huli { - width: 250rpx; - height: 100%; + } + + .right-container-fir-left-card-main-right { + margin-left: 10rpx; + margin-right: 5rpx; + width: 70rpx; + height: 90rpx; + } + + .right-huli { + width: 250rpx; + height: 100%; + // background-color: #047ADB; + margin-top: 0rpx; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + + .right-huli-view::-webkit-scrollbar { + display: none; + } + + .right-huli-view { + height: 700rpx; // background-color: #047ADB; - margin-top: 0rpx; + overflow: auto; display: flex; justify-content: center; align-items: center; flex-direction: column; - - .right-huli-view::-webkit-scrollbar { - display: none; - } - - .right-huli-view { - height: 700rpx; - // background-color: #047ADB; - overflow: auto; + + .right-huli-view-dis { + // flex-direction: column; + margin-top: 30rpx; + // margin-bottom: 30rpx; display: flex; justify-content: center; align-items: center; flex-direction: column; - - .right-huli-view-dis { - // flex-direction: column; - margin-top: 30rpx; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - - .right-huli-img { - width: 120rpx; - height: 120rpx; - } - - .right-huli-text { - width: 100%; - height: 20rpx; - text-align: center; - } + + .right-huli-img { + width: 120rpx; + height: 120rpx; } - } - - .right-huli-shang { - width: 50rpx; - height: 30rpx; - } - - .right-huli-xia { - margin-top: 10rpx; - width: 50rpx; - height: 30rpx; - } - } - .right-container-photo{ - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - .right-container-photo-img{ - width: 500rpx; - height: 550rpx; - margin-top: 30rpx; - margin-bottom: 10rpx; - } - .right-container-photo-text{ - font-size: 50rpx; - color: #324160 ; - } - } - .right-container-fir-left-card-main-left { - height: 100rpx; - width: 100rpx; - margin-right: 0rpx; - margin-left: 0rpx; - } - .right-container-left-type { - position: absolute; - top: 70rpx; - left: -15rpx; - width: 315rpx; - height: 104rpx; - } + .right-huli-text { + width: 100%; + height: 20rpx; + text-align: center; + } - .right-container-left-font { - position: absolute; - top: 80rpx; - left: 55rpx; - font-size: 50rpx; - color: #fff; - } - - .time-tra { - // margin-left: 150rpx; - margin-top: 450rpx; - height: 100%; - width: 700rpx; - .time-button-view { - display: flex; - margin-top: 50rpx; - margin-left: -30rpx; - - .time-button-start { - width: 300rpx; - height: 100rpx; - border-radius: 50rpx; - background: linear-gradient(to top, #0DA0B1, #04D3AF); - border-left: 2rpx solid #fff; - display: flex; - justify-content: center; - align-items: center; + .right-huli-text-dark { + width: 100%; + height: 20rpx; + text-align: center; color: #fff; - font-size: 40rpx; - margin-right: 25rpx; - box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3); - } - - .time-button-end { - width: 300rpx; - height: 100rpx; - border-radius: 50rpx; - background-color: #fff; - display: flex; - justify-content: center; - align-items: center; - font-size: 40rpx; - box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3); } } + } - .time-people { - display: flex; - margin-bottom: 20rpx; + .right-huli-shang { + width: 50rpx; + height: 30rpx; + } - .time-people-img { - width: 60rpx; - height: 60rpx; - margin-right: 5rpx; - // margin-left: 50rpx; - } - - .time-people-font { - color: #586787; - font-size: 42rpx; - margin-right: 90rpx; - } - } - - .time-font { - font-size: 100rpx; - text-shadow: 0 -5rpx 5rpx; - margin-bottom: 30rpx; - } - - .time-text { - margin-left: 10rpx; - color: #364464; - font-size: 70rpx; - font-weight: 700; - width: 800rpx; - margin-bottom: 50rpx; - line-height: 70rpx; - position: relative; - - .time-text-img { - position: absolute; - top: 0; - left: 300rpx; - width: 80rpx; - height: 80rpx; - } - } + .right-huli-xia { + margin-top: 10rpx; + width: 50rpx; + height: 30rpx; } } + + .right-container-photo { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + .right-container-photo-img { + width: 500rpx; + height: 550rpx; + margin-top: 30rpx; + margin-bottom: 10rpx; + } + + .right-container-photo-text { + font-size: 50rpx; + color: #324160; + } + + .right-container-photo-text-dark { + font-size: 50rpx; + background: linear-gradient(to bottom, #FFFFFF, #B2C8E2); + -webkit-background-clip: text; + color: transparent; + } + } + + .right-container-fir-left-card-main-left { + height: 100rpx; + width: 100rpx; + margin-right: 0rpx; + margin-left: 35rpx; + } + + .right-container-left-type { + position: absolute; + top: 70rpx; + left: -15rpx; + width: 315rpx; + height: 104rpx; + } + + .right-container-left-font { + position: absolute; + top: 80rpx; + left: 55rpx; + font-size: 50rpx; + color: #fff; + } + + .time-tra { + margin-left: 0rpx; + margin-top: 100rpx; + height: 100%; + width: 700rpx; + + .time-button-view { + display: flex; + margin-top: 50rpx; + margin-left: 0rpx; + + .time-button-start { + width: 300rpx; + height: 100rpx; + border-radius: 50rpx; + background: linear-gradient(to top, #0DA0B1, #04D3AF); + border-left: 2rpx solid #fff; + display: flex; + justify-content: center; + align-items: center; + color: #fff; + font-size: 40rpx; + margin-right: 25rpx; + box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3); + } + + .time-button-end { + width: 300rpx; + height: 100rpx; + border-radius: 50rpx; + background-color: #fff; + display: flex; + justify-content: center; + align-items: center; + font-size: 40rpx; + box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3); + } + + .time-button-end-dark { + width: 300rpx; + height: 100rpx; + border-radius: 50rpx; + display: flex; + justify-content: center; + align-items: center; + font-size: 40rpx; + box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3); + background: linear-gradient(to top, #6B87BA, #FFFFFF); + /* 渐变从下到上 */ + } + } + + .time-people { + display: flex; + margin-bottom: 20rpx; + + .time-people-img { + width: 60rpx; + height: 60rpx; + margin-right: 5rpx; + // margin-left: 50rpx; + } + + .time-people-font { + color: #586787; + font-size: 42rpx; + margin-right: 90rpx; + } + } + + .time-font { + font-size: 100rpx; + text-shadow: 0 -5rpx 5rpx; + margin-bottom: 30rpx; + font-weight: 500; + } + + .time-font-dark { + font-size: 100rpx; + text-shadow: 0 -5rpx 5rpx; + margin-bottom: 30rpx; + background: linear-gradient(to bottom, #FFFFFF, #B2C8E2); + -webkit-background-clip: text; + color: transparent; + font-weight: 500; + } + + .time-text { + margin-left: 10rpx; + color: #364464; + font-size: 70rpx; + font-weight: 700; + width: 800rpx; + margin-bottom: 50rpx; + line-height: 70rpx; + position: relative; + } + + .time-text-dark { + margin-left: 10rpx; + // color: #364464; + font-size: 70rpx; + font-weight: 700; + width: 800rpx; + margin-bottom: 50rpx; + line-height: 70rpx; + position: relative; + background: linear-gradient(to bottom, #FFFFFF, #B2C8E2); + -webkit-background-clip: text; + color: transparent; + } + + .time-text-img { + position: absolute; + top: 0; + left: 300rpx; + width: 80rpx; + height: 80rpx; + } + + } + } .right-container-fir { @@ -774,223 +1096,313 @@ height: 98%; border-radius: 80rpx; background-color: rgb(195, 211, 233); + } - .right-container-fir-left-card-main { + .right-container-fir-left-card-dark { + position: absolute; + top: 1%; + left: 0.5%; + width: 99%; + height: 98%; + border-radius: 80rpx; + background-color: rgb(22, 48, 76); + /* 底色 */ + // background: linear-gradient(135deg, rgba(14, 27, 53, 0.45), rgba(52, 78, 119, 0.45), rgba(28, 74, 112, 0.45)); + } + + .right-container-fir-left-card-main { + display: flex; + justify-content: center; + align-items: center; + width: 2050rpx; + height: 100%; + margin-top: 60rpx; + + .split-line-white { + width: 1px; + /* 线条的宽度 */ + height: 800rpx; + /* 高度占满父容器 */ + background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #fff 50%, rgba(0, 0, 0, 0) 100%); + margin-right: 50rpx; + } + + .uni-margin-wrap { + width: 300rpx; + width: 100%; + + .swiper { + height: 700rpx; + + .swiper-item-flex { + display: flex; + } + + .swiper-item { + display: block; + height: 300rpx; + line-height: 300rpx; + text-align: center; + } + } + } + + .right-container-fir-left-card-main-right { + margin-left: 50rpx; + margin-right: 30rpx; + width: 70rpx; + height: 90rpx; + } + + .right-huli { + + width: 200rpx; + height: 100%; + // background-color: #047ADB; + margin-top: -100rpx; display: flex; justify-content: center; align-items: center; - width: 100%; - height: 100%; - margin-top: 60rpx; + flex-direction: column; - .right-container-fir-left-card-main-right { - margin-left: 50rpx; - margin-right: 30rpx; - width: 70rpx; - height: 90rpx; + .right-huli-view::-webkit-scrollbar { + display: none; } - .right-huli { - width: 250rpx; - height: 100%; + .right-huli-view { + height: 700rpx; // background-color: #047ADB; - margin-top: -100rpx; + overflow: auto; display: flex; justify-content: center; align-items: center; flex-direction: column; - .right-huli-view::-webkit-scrollbar { - display: none; - } - - .right-huli-view { - height: 700rpx; - // background-color: #047ADB; - overflow: auto; + .right-huli-view-dis { + // flex-direction: column; + margin-top: 30rpx; + margin-bottom: 30rpx; display: flex; justify-content: center; align-items: center; flex-direction: column; - .right-huli-view-dis { - // flex-direction: column; - margin-top: 30rpx; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - - .right-huli-img { - width: 120rpx; - height: 120rpx; - } - - .right-huli-text { - width: 100%; - height: 20rpx; - text-align: center; - } + .right-huli-img { + width: 120rpx; + height: 120rpx; } - } - .right-huli-shang { - width: 50rpx; - height: 30rpx; - } + .right-huli-text { + width: 100%; + height: 20rpx; + text-align: center; + } - .right-huli-xia { - margin-top: 10rpx; - width: 50rpx; - height: 30rpx; + .right-huli-text-dark { + width: 100%; + height: 20rpx; + text-align: center; + color: #fff; + } } } - .time-tra { - margin-left: 30rpx; + .right-huli-shang { + width: 50rpx; + height: 30rpx; + } - .time-button-view { + .right-huli-xia { + margin-top: 10rpx; + width: 50rpx; + height: 30rpx; + } + } + + .time-tra { + margin-left: 30rpx; + + .time-button-view { + display: flex; + margin-top: 50rpx; + margin-left: -30rpx; + + .time-button-start { + width: 300rpx; + height: 100rpx; + border-radius: 50rpx; + background: linear-gradient(to top, #047ADB, #0EA7DD); + border-left: 2rpx solid #fff; display: flex; - margin-top: 50rpx; - margin-left: -30rpx; - - .time-button-start { - width: 300rpx; - height: 100rpx; - border-radius: 50rpx; - background: linear-gradient(to top, #047ADB, #0EA7DD); - border-left: 2rpx solid #fff; - display: flex; - justify-content: center; - align-items: center; - color: #fff; - font-size: 40rpx; - margin-right: 25rpx; - box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3); - } - - .time-button-end { - width: 300rpx; - height: 100rpx; - border-radius: 50rpx; - background-color: #fff; - display: flex; - justify-content: center; - align-items: center; - font-size: 40rpx; - box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3); - } + justify-content: center; + align-items: center; + color: #fff; + font-size: 40rpx; + margin-right: 25rpx; + box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3); } - .time-people { + .time-button-end { + width: 300rpx; + height: 100rpx; + border-radius: 50rpx; + background-color: #fff; display: flex; - - .time-people-img { - width: 50rpx; - height: 50rpx; - margin-right: 20rpx; - } - - .time-people-font { - color: #586787; - font-size: 42rpx; - - } + justify-content: center; + align-items: center; + font-size: 40rpx; + box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3); } - .time-font { - font-size: 100rpx; - text-shadow: 0 -5rpx 5rpx; - margin-bottom: 50rpx; + .time-button-end-dark { + width: 300rpx; + height: 100rpx; + border-radius: 50rpx; + display: flex; + justify-content: center; + align-items: center; + font-size: 40rpx; + box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3); + background: linear-gradient(to top, #6B87BA, #FFFFFF); + /* 渐变从下到上 */ + } + } + + .time-people { + display: flex; + + .time-people-img { + width: 50rpx; + height: 50rpx; + margin-right: 20rpx; } - .time-text { - margin-left: 10rpx; + .time-people-font { color: #586787; font-size: 42rpx; - width: 800rpx; - margin-bottom: 50rpx; - line-height: 70rpx; + } } - - .right-container-fir-left-card-card { - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - position: relative; - - .right-container-fir-left-card-zhixing { - position: absolute; - top: 25rpx; - left: 450rpx; - } - - .right-container-fir-left-card-zhixing-font { - position: absolute; - top: 5rpx; - - left: 30rpx; - width: 200rpx; - font-size: 30rpx; - color: #fff; - z-index: 10; - } - - .right-container-fir-left-card-zhixing-img { - width: 149rpx; - height: 57rpx; - z-index: 9; - - } - - .right-container-fir-left-card-main-font { - font-size: 50rpx; - font-weight: 350; - - } - - .right-container-fir-left-card-main-laba { - width: 70rpx; - height: 80rpx; - position: absolute; - top: 460rpx; - left: 20rpx; - - } - - .right-container-fir-left-card-img { - width: 588rpx; - height: 466rpx; - } + .time-font { + font-size: 100rpx; + text-shadow: 0 -5rpx 5rpx; + margin-bottom: 50rpx; + font-weight: 500; } - .right-container-fir-left-card-main-left { - height: 100rpx; + .time-font-dark { + font-size: 100rpx; + text-shadow: 0 -5rpx 5rpx; + margin-bottom: 50rpx; + background: linear-gradient(to right, #EBF4FF, #ADC4E0); + -webkit-background-clip: text; + color: transparent; + font-weight: 500; + } + + .time-text { + margin-left: 10rpx; + color: #586787; + font-size: 42rpx; + width: 800rpx; + margin-bottom: 50rpx; + line-height: 70rpx; + } + + .time-text-dark { + margin-left: 10rpx; + color: #CDD6EA; + font-size: 42rpx; + width: 800rpx; + margin-bottom: 50rpx; + line-height: 70rpx; + } + } + + + .right-container-fir-left-card-card { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + position: relative; + + .right-container-fir-left-card-zhixing { + position: absolute; + top: 90rpx; + left: 450rpx; + } + + .right-container-fir-left-card-zhixing-font { + position: absolute; + top: 5rpx; + + left: 30rpx; + width: 200rpx; + font-size: 30rpx; + color: #fff; + z-index: 10; + } + + .right-container-fir-left-card-zhixing-img { + width: 149rpx; + height: 57rpx; + z-index: 9; + + } + + .right-container-fir-left-card-main-font { + font-size: 50rpx; + font-weight: 350; + + } + + .right-container-fir-left-card-main-font-dark { + font-size: 50rpx; + font-weight: 350; + color: #fff; + } + + .right-container-fir-left-card-main-laba { width: 70rpx; - margin-right: 10rpx; - // height: ; + height: 80rpx; + position: absolute; + top: 540rpx; + left: 20rpx; + + } + + .right-container-fir-left-card-img { + width: 588rpx; + height: 466rpx; } } - .right-container-fir-left-card-hulilei { - position: absolute; - top: 70rpx; - left: -15rpx; - width: 315rpx; - height: 104rpx; - + .right-container-fir-left-card-main-left { + height: 100rpx; + width: 100rpx; + margin-right: 0rpx; + margin-left: 50rpx; + // height: ; } + } - .right-container-fir-left-card-hulilei-font { - position: absolute; - top: 80rpx; - left: 55rpx; - font-size: 50rpx; - color: #fff; - } + .right-container-fir-left-card-hulilei { + position: absolute; + top: 70rpx; + left: -15rpx; + width: 315rpx; + height: 104rpx; + + } + + .right-container-fir-left-card-hulilei-font { + position: absolute; + top: 80rpx; + left: 55rpx; + font-size: 50rpx; + color: #fff; } } @@ -1005,94 +1417,146 @@ background: url(/static/index/rightbgi.png) no-repeat; background-size: contain; + } - .right-container-card { - margin-top: 80rpx; - margin-left: 100rpx; - height: 800rpx; + .right-container-fir-right-dark { + margin-top: 6rpx; + margin-left: 2%; + margin-right: 3%; + width: 30%; + height: 880rpx; + border-radius: 80rpx; + border: 1rpx solid #fff; + background-color: #16304c; + // background: url(/static/index/rightbgi.png) no-repeat; + // background-size: contain; + } - .right-container-button { + .right-container-card { + margin-top: 80rpx; + margin-left: 100rpx; + height: 800rpx; + + .right-container-button { + display: flex; + margin-left: -20rpx; + margin-top: 40rpx; + + .right-container-button-any { display: flex; - margin-left: -20rpx; - margin-top: 40rpx; + justify-content: center; + align-items: center; + flex-direction: column; + width: 180rpx; + position: relative; - .right-container-button-any { - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - width: 180rpx; - position: relative; + .right-container-button-ray { + position: absolute; + top: -25rpx; + left: 10rpx; + width: 150rpx; + height: 150rpx; - .right-container-button-ray { - position: absolute; - top: -25rpx; - left: 10rpx; - width: 150rpx; - height: 150rpx; - - } - } - - .right-container-button-img { - width: 120rpx; - height: 120rpx; } } - .right-container-fenge { - margin-top: 40rpx; - width: 100%; - height: 2rpx; - /* 可根据需求调整容器的高度 */ - background: linear-gradient(to right, - rgba(255, 255, 255, 1) 50%, - /* 白色中心 */ - rgba(255, 255, 255, 0) 80%); - /* 渐变至透明 */ + .right-container-button-img { + width: 120rpx; + height: 120rpx; + } + } + + .right-container-fenge { + margin-top: 40rpx; + width: 100%; + height: 2rpx; + /* 可根据需求调整容器的高度 */ + background: linear-gradient(to right, + rgba(255, 255, 255, 1) 50%, + /* 白色中心 */ + rgba(255, 255, 255, 0) 80%); + /* 渐变至透明 */ + } + + .right-container-tem { + display: flex; + margin-top: 50rpx; + + .right-container-tem-text { + font-size: 70rpx; + margin-right: 70rpx; } - .right-container-tem { - display: flex; - margin-top: 50rpx; - - .right-container-tem-text { - font-size: 70rpx; - margin-right: 70rpx; - } - - .right-container-tem-img { - width: 100rpx; - height: 100rpx; - } + .right-container-tem-text-dark { + font-size: 70rpx; + margin-right: 70rpx; + color: #6B87BA; } - .right-container-title { - font-size: 150rpx; - text-shadow: 0 -5rpx 5rpx; - display: block; - margin: 0; + .right-container-tem-img { + width: 100rpx; + height: 100rpx; } + } - .right-container-date { - font-size: 50rpx; - color: #7080A1; - display: block; - margin: 0; - margin-left: 18rpx; - margin-bottom: 10rpx; - } + .right-container-title { + font-size: 150rpx; + text-shadow: 0 -5rpx 5rpx; + display: block; + margin: 0; + } - .right-container-day { - font-size: 55rpx; - font-weight: 600; - // color: #7080A1; - margin-left: 18rpx; - } + .right-container-title-dark { + font-size: 150rpx; + text-shadow: 0 -5rpx 5rpx; + display: block; + margin: 0; + background: linear-gradient(to bottom, #FFFFFF, #B2C8E2); + -webkit-background-clip: text; + color: transparent; + } + + .right-container-date { + font-size: 50rpx; + color: #7080A1; + display: block; + margin: 0; + margin-left: 18rpx; + margin-bottom: 10rpx; + } + + .right-container-date-dark { + font-size: 50rpx; + color: #7080A1; + display: block; + margin: 0; + margin-left: 18rpx; + margin-bottom: 10rpx; + background: linear-gradient(to bottom, #FFFFFF, #B2C8E2); + -webkit-background-clip: text; + color: transparent; + } + + .right-container-day { + font-size: 55rpx; + font-weight: 600; + // color: #7080A1; + margin-left: 18rpx; + } + + .right-container-day-dark { + font-size: 55rpx; + font-weight: 600; + // color: #7080A1; + margin-left: 18rpx; + background: linear-gradient(to bottom, #FFFFFF, #B2C8E2); + -webkit-background-clip: text; + color: transparent; } } } + .right-container-title { margin-top: 127rpx; margin-bottom: 73rpx; @@ -1101,12 +1565,29 @@ font-size: 58rpx; } + .right-container-title-no-dark { + font-size: 58rpx; + background: linear-gradient(to bottom, #FFFFFF, #B2C8E2); + -webkit-background-clip: text; + color: transparent; + } + .right-container-title-class { font-size: 58rpx; font-weight: 800; margin-left: 20rpx; } - .right-container-title-class-anhei-button{ + + .right-container-title-class-dark { + font-size: 58rpx; + font-weight: 800; + margin-left: 20rpx; + background: linear-gradient(to bottom, #FFFFFF, #B2C8E2); + -webkit-background-clip: text; + color: transparent; + } + + .right-container-title-class-anhei-button { float: right; display: flex; justify-content: center; @@ -1117,14 +1598,15 @@ height: 100rpx; background-color: black; border: 2rpx solid; + .right-container-title-class-anhei { font-size: 58rpx; font-weight: 800; color: white; - + } } - + } } @@ -1163,6 +1645,14 @@ font-weight: 700; font-size: 73rpx; } + + .left-head-font-dark { + font-weight: 700; + font-size: 73rpx; + background: linear-gradient(to right, #EBF4FF, #ADC4E0); + -webkit-background-clip: text; + color: transparent; + } } .left-img-container { @@ -1184,6 +1674,7 @@ //分割线 .split-line { + margin-top: 200rpx; width: 1px; /* 线条的宽度 */ height: 300rpx; diff --git a/pages/index/indexDark.vue b/pages/index/indexDark.vue deleted file mode 100644 index 577f9c9..0000000 --- a/pages/index/indexDark.vue +++ /dev/null @@ -1,1168 +0,0 @@ - - - - - \ No newline at end of file diff --git a/static/index/darkicon/diandark.png b/static/index/darkicon/diandark.png new file mode 100644 index 0000000..762456d Binary files /dev/null and b/static/index/darkicon/diandark.png differ diff --git a/static/index/darkicon/dianqidark.png b/static/index/darkicon/dianqidark.png new file mode 100644 index 0000000..0657fc1 Binary files /dev/null and b/static/index/darkicon/dianqidark.png differ diff --git a/static/index/darkicon/hushidark.png b/static/index/darkicon/hushidark.png new file mode 100644 index 0000000..91cf95f Binary files /dev/null and b/static/index/darkicon/hushidark.png differ diff --git a/static/index/darkicon/kontiaodark.png b/static/index/darkicon/kontiaodark.png new file mode 100644 index 0000000..118f8db Binary files /dev/null and b/static/index/darkicon/kontiaodark.png differ diff --git a/static/index/darkicon/labadark.png b/static/index/darkicon/labadark.png new file mode 100644 index 0000000..4b22210 Binary files /dev/null and b/static/index/darkicon/labadark.png differ diff --git a/static/index/darkicon/linshidark.png b/static/index/darkicon/linshidark.png new file mode 100644 index 0000000..e40469b Binary files /dev/null and b/static/index/darkicon/linshidark.png differ diff --git a/static/index/darkicon/nuanfengdark.png b/static/index/darkicon/nuanfengdark.png new file mode 100644 index 0000000..1b0f740 Binary files /dev/null and b/static/index/darkicon/nuanfengdark.png differ diff --git a/static/index/darkicon/peiyaodark.png b/static/index/darkicon/peiyaodark.png new file mode 100644 index 0000000..07b2409 Binary files /dev/null and b/static/index/darkicon/peiyaodark.png differ diff --git a/static/index/darkicon/qinglingdark.png b/static/index/darkicon/qinglingdark.png new file mode 100644 index 0000000..da4f8ea Binary files /dev/null and b/static/index/darkicon/qinglingdark.png differ diff --git a/static/index/darkicon/shidudark.png b/static/index/darkicon/shidudark.png new file mode 100644 index 0000000..1801d8b Binary files /dev/null and b/static/index/darkicon/shidudark.png differ diff --git a/static/index/darkicon/wendudark.png b/static/index/darkicon/wendudark.png new file mode 100644 index 0000000..938f036 Binary files /dev/null and b/static/index/darkicon/wendudark.png differ diff --git a/static/index/darkicon/xiezhudark.png b/static/index/darkicon/xiezhudark.png new file mode 100644 index 0000000..d4bc71a Binary files /dev/null and b/static/index/darkicon/xiezhudark.png differ diff --git a/static/index/darkicon/xinxidark.png b/static/index/darkicon/xinxidark.png new file mode 100644 index 0000000..293f037 Binary files /dev/null and b/static/index/darkicon/xinxidark.png differ diff --git a/static/index/darkicon/yaopindark.png b/static/index/darkicon/yaopindark.png new file mode 100644 index 0000000..5fe4958 Binary files /dev/null and b/static/index/darkicon/yaopindark.png differ diff --git a/static/index/darkicon/yishengdark.png b/static/index/darkicon/yishengdark.png new file mode 100644 index 0000000..db2eb0d Binary files /dev/null and b/static/index/darkicon/yishengdark.png differ diff --git a/static/index/darkicon/yizhudark.png b/static/index/darkicon/yizhudark.png new file mode 100644 index 0000000..f4e8ce8 Binary files /dev/null and b/static/index/darkicon/yizhudark.png differ diff --git a/static/index/darkicon/zhaomingdark.png b/static/index/darkicon/zhaomingdark.png new file mode 100644 index 0000000..a277303 Binary files /dev/null and b/static/index/darkicon/zhaomingdark.png differ diff --git a/static/index/darkicon/zhixingfangshidark.png b/static/index/darkicon/zhixingfangshidark.png new file mode 100644 index 0000000..4d9de23 Binary files /dev/null and b/static/index/darkicon/zhixingfangshidark.png differ diff --git a/static/index/darkicon/zhixingrenyuanddark.png b/static/index/darkicon/zhixingrenyuanddark.png new file mode 100644 index 0000000..f2d564d Binary files /dev/null and b/static/index/darkicon/zhixingrenyuanddark.png differ diff --git a/static/index/darkicon/zhongdiandark.png b/static/index/darkicon/zhongdiandark.png new file mode 100644 index 0000000..ffb8f9a Binary files /dev/null and b/static/index/darkicon/zhongdiandark.png differ diff --git a/static/index/darkicon/zhuandandark.png b/static/index/darkicon/zhuandandark.png new file mode 100644 index 0000000..0697973 Binary files /dev/null and b/static/index/darkicon/zhuandandark.png differ diff --git a/static/index/label.png b/static/index/label.png new file mode 100644 index 0000000..bc3b3c3 Binary files /dev/null and b/static/index/label.png differ diff --git a/static/index/teeth.png b/static/index/teeth.png new file mode 100644 index 0000000..eaa17f8 Binary files /dev/null and b/static/index/teeth.png differ