|
|
@@ -0,0 +1,135 @@
|
|
|
+.page-wrap {
|
|
|
+ min-height: 100vh;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+.header-panel {
|
|
|
+ height: 164.84rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1rpx solid #e0e0e0;
|
|
|
+ padding: 0 41.21rpx;
|
|
|
+ .avatar {
|
|
|
+ width: 96.15rpx;
|
|
|
+ height: 96.15rpx;
|
|
|
+ margin-right: 16.48rpx;
|
|
|
+ }
|
|
|
+ .info {
|
|
|
+ flex: 1;
|
|
|
+ position: relative;
|
|
|
+ padding-right: 68.68rpx;
|
|
|
+ }
|
|
|
+ .arrow {
|
|
|
+ width: 41.21rpx;
|
|
|
+ height: 41.21rpx;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ font-size: 32.97rpx;
|
|
|
+ }
|
|
|
+ .company {
|
|
|
+ font-size: 27.47rpx;
|
|
|
+ color: #666;
|
|
|
+ margin-top: 5.49rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+.menu-panel {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 41.21rpx 0;
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 27.47rpx;
|
|
|
+ margin: 0 27.47rpx;
|
|
|
+ }
|
|
|
+ .icon {
|
|
|
+ width: 61.81rpx;
|
|
|
+ height: 67.31rpx;
|
|
|
+ margin-bottom: 20.6rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+.nav-panel {
|
|
|
+ overflow: hidden;
|
|
|
+ .item {
|
|
|
+ float: left;
|
|
|
+ margin: 0 0 20.6rpx 31.59rpx;
|
|
|
+ border-radius: 10.99rpx;
|
|
|
+ padding: 27.47rpx 0 0 34.34rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 329.67rpx;
|
|
|
+ height: 164.84rpx;
|
|
|
+ color: #fff;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 0;
|
|
|
+ &-1 {
|
|
|
+ height: 348.9rpx;
|
|
|
+ background: linear-gradient(222.435558821297deg, rgba(49, 148, 248, 1) -2%, rgba(31, 113, 249, 1) 100%);
|
|
|
+ .icon {
|
|
|
+ width: 203.3rpx;
|
|
|
+ height: 203.3rpx;
|
|
|
+ right: 0;
|
|
|
+ bottom: -13.74rpx;
|
|
|
+ }
|
|
|
+ .desc {
|
|
|
+ line-height: 1.7;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-2 {
|
|
|
+ background: linear-gradient(243.434948822922deg, rgba(255, 175, 34, 1) 0%, rgba(253, 153, 27, 1) 99%);
|
|
|
+ }
|
|
|
+ &-3 {
|
|
|
+ background: linear-gradient(243.434948822922deg, rgba(253, 113, 78, 1) 0%, rgba(246, 78, 76, 1) 99%);
|
|
|
+ }
|
|
|
+ &-4 {
|
|
|
+ background: linear-gradient(243.434948822922deg, rgba(253, 91, 132, 1) 0%, rgba(251, 73, 106, 1) 99%);
|
|
|
+ }
|
|
|
+ &-5 {
|
|
|
+ background: linear-gradient(243.434948822922deg, rgba(0, 193, 226, 1) 0%, rgba(0, 146, 218, 1) 99%);
|
|
|
+ }
|
|
|
+ &-6 {
|
|
|
+ background: linear-gradient(243.434948822922deg, rgba(85, 130, 247, 1) 0%, rgba(62, 102, 227, 1) 99%);
|
|
|
+ }
|
|
|
+ &-7 {
|
|
|
+ background: linear-gradient(243.434948822922deg, rgba(151, 115, 249, 1) 0%, rgba(126, 88, 235, 1) 97%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ font-size: 30.22rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 5.49rpx;
|
|
|
+ }
|
|
|
+ .desc {
|
|
|
+ font-size: 24.73rpx;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ line-height: 1.4;
|
|
|
+ }
|
|
|
+ .icon {
|
|
|
+ position: absolute;
|
|
|
+ right: -13.74rpx;
|
|
|
+ bottom: -13.74rpx;
|
|
|
+ width: 133.24rpx;
|
|
|
+ height: 133.24rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+.banner {
|
|
|
+ width: 686.81rpx;
|
|
|
+ height: 278.85rpx;
|
|
|
+ display: block;
|
|
|
+ margin: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.foot-panel {
|
|
|
+ text-align: center;
|
|
|
+ padding: 41.21rpx 0;
|
|
|
+ font-size: 21.98rpx;
|
|
|
+ color: #999;
|
|
|
+ .link {
|
|
|
+ color: #0384d6;
|
|
|
+ }
|
|
|
+}
|