修改供应商落地页样式

src/main/resources/static/css/supplier-login/login.css

@@ -93,7 +93,7 @@ body{
     height: 65px;
     display: flex;
     justify-content: center;
-    align-items: end;
+    align-items: flex-end;
     color: #FFFFFF;
     font-size: 14px;
     cursor: pointer;
@@ -210,7 +210,7 @@ body{
 }
 .img_logo .logo {
     width: 5.5vw;
-    height: 4vh;
+    height: 2.5vw;
     background: url("/img/supplier-login/logo.png") no-repeat;
     background-size: 100% 100%;
 }
@@ -232,7 +232,7 @@ body{
     top: 0;
     display: flex;
     justify-content: center;
-    align-items: end;
+    align-items: flex-end;
     width: 6vw;
     height: 100%;
     transition: .3s;
@@ -295,16 +295,16 @@ body{
     margin-right: 5%;
 }
 .login_header_container .iphone div:nth-child(1){
-    width: 36px;
-    height: 36px;
-    background: url("/img/supplier-login/iPhone.png") no-repeat;
+    width: 1.875vw;
+    height: 1.875vw;
+    background: url(/img/supplier-login/iPhone.png) no-repeat;
     background-size: contain;
     background-position: center;
 }
 .login_header_container .iphone div:nth-child(2) {
     color: #FF5B00;
     font-size: 1vw;
-    margin-left: 5px;
+    margin-left: 0.26vw;
     font-weight: bold;
     white-space: nowrap;
 }
@@ -333,11 +333,11 @@ body{
 }
 #fullpage .page {
     width: 100vw;
-    height: 100vh;
     scroll-snap-align: start;
     box-sizing: border-box;
     overflow: hidden;
     position: relative;
+    padding-bottom: 4vw;
 }
 .page #positionTab {
     position: absolute;
@@ -351,7 +351,7 @@ body{
     padding-top: 7vh;
 }
 #zeroPage .el-carousel__container {
-    height: 510px;
+    height: 26.562vw;
 }
 .el-carousel__item:nth-child(1) {
     display: flex;
@@ -429,14 +429,14 @@ body{
     justify-content: center;
     align-items: center;
     width: 100vw;
-    height: 600px;
+    margin-top: 4vw;
     box-sizing: border-box;
 }
 .server .server_1,
 .server .server_2,
 .server .server_3 {
-    height: 460px;
-    width: 390px;
+    height: 23.958vw;
+    width: 20.312vw;
     position: relative;
 }
 #zeroPage .server .box {
@@ -458,22 +458,22 @@ body{
     flex-direction: column;
     justify-content: space-around;
     align-items: center;
-    font-size: 18px;
-    padding: 60px;
+    font-size: 0.938vw;
+    padding: 3.125vw;
     box-sizing: border-box;
 }
 #zeroPage .server .operate,
 #zeroPage .server .tourist,
 #zeroPage .server .sale {
-    width: 400px;
+    width: 20.833vw;
     height: 100%;
     transition: .5s;
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     align-items: center;
-    font-size: 18px;
-    padding: 30px;
+    font-size: 0.938vw;
+    padding: 1.562vw;
     box-sizing: border-box;
     background: linear-gradient(0deg, #FF5B00, #FF9300);
     -webkit-transform: rotateY(-180deg);
@@ -482,15 +482,15 @@ body{
     white-space: nowrap;
 }
 #zeroPage .server .tourist_logo {
-    width: 100px;
-    height: 100px;
+    width: 5.208vw;
+    height: 5.208vw;
     background: url("/img/supplier-login/cycle/-11.png") no-repeat;
     background-size: cover;
 }
 #zeroPage .server .tourist_bg_logo {
     background: url("/img/supplier-login/cycle/1.png") no-repeat;
-    width: 160px;
-    height: 160px;
+    width: 8.333vw;
+    height: 8.333vw;
     background-size: cover;
 }
 #zeroPage .server .tourist_bg_title {
@@ -525,34 +525,34 @@ body{
 }
 #zeroPage .server .operate_logo {
     background: url("/img/supplier-login/cycle/-22.png") no-repeat;
-    width: 100px;
-    height: 100px;
+    width: 5.208vw;
+    height: 5.208vw;
     background-size: cover;
 }
 #zeroPage .server .operate_bg_logo {
     background: url("/img/supplier-login/cycle/2.png") no-repeat;
-    width: 160px;
-    height: 160px;
+    width: 8.333vw;
+    height: 8.333vw;
     background-size: cover;
 }
 #zeroPage .server .operate_bg_title {
     color: black;
 }
 #zeroPage .server .all_cont {
-    font-size: 16px;
+    font-size: 0.833vw;
     box-sizing: border-box;
     text-align: center;
 }
 #zeroPage .server .sale_logo {
     background: url("/img/supplier-login/cycle/-33.png") no-repeat;
-    width: 100px;
-    height: 100px;
+    width: 5.208vw;
+    height: 5.208vw;
     background-size: cover;
 }
 #zeroPage .server .sale_bg_logo {
     background: url("/img/supplier-login/cycle/3.png") no-repeat;
-    width: 160px;
-    height: 160px;
+    width: 8.333vw;
+    height: 8.333vw;
     background-size: cover;
 }
 #zeroPage .server .sale_bg_title {
@@ -561,19 +561,18 @@ body{
 #firstPage {
     background: url("/img/supplier-login/selection/select_bg.png") no-repeat;
     background-size: cover;
-    height: 1014px !important;
 }
 #firstPage .selection {
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-top: 78px;
+    margin-top: 2vw;
 }
 #firstPage .selection .selection_item{
-    padding-top: 20px;
+    padding-top: 2vw;
     box-sizing: border-box;
     transition: .3s;
-    height: 666px;
+    height: 34.688vw;
 }
 #firstPage .selection .selection_item:hover {
     padding-top: 0;
@@ -586,13 +585,13 @@ body{
     margin: 2vh;
 }
 #firstPage .selection_item .selection_item_contain {
-    width: 392px;
-    height: 646px;
+    width: 20.417vw;
+    height: 33.646vw;
     background-color: #fff;
 }
 #firstPage .selection_item .selection_item_contain .contain_bg_01 {
-    width: 392px;
-    height: 120px;
+    width: 100%;
+    height: 6.250vw;
     background: url("/img/supplier-login/selection/select_01.png") no-repeat;
     background-size: 100%;
     display: flex;
@@ -600,11 +599,11 @@ body{
     justify-content: center;
     color: #FFFFFF;
     font-weight: bold;
-    font-size: 40px;
+    font-size: 2.083vw;
 }
 #firstPage .selection_item .selection_item_contain .contain_bg_02 {
-    width: 392px;
-    height: 120px;
+    width: 100%;
+    height: 6.250vw;
     background: url("/img/supplier-login/selection/select_02.png") no-repeat;
     background-size: 100%;
     display: flex;
@@ -612,11 +611,11 @@ body{
     align-items: center;
     color: #FFFFFF;
     font-weight: bold;
-    font-size: 2vw;
+    font-size: 2.083vw;
 }
 #firstPage .selection_item .selection_item_contain .contain_bg_03 {
-    width: 392px;
-    height: 120px;
+    width: 100%;
+    height: 6.250vw;
     background: url("/img/supplier-login/selection/select_03.png") no-repeat;
     background-size: 100%;
     display: flex;
@@ -624,7 +623,7 @@ body{
     align-items: center;
     color: #FFFFFF;
     font-weight: bold;
-    font-size: 2vw;
+    font-size: 2.083vw;
 }
 #firstPage .selection_item_contain .bg1_text {
     width: 100%;
@@ -632,10 +631,10 @@ body{
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
-    font-size: 18px;
-    padding: 48px;
+    font-size: 0.938vw;
+    padding: 2.5vw;
     box-sizing: border-box;
-    height: 526px;
+    height: 27.396vw;
 }
 .bg1_contain {
     display: flex;
@@ -658,11 +657,11 @@ body{
     align-items: center;
     justify-content: space-between;
     width: 100%;
-    height: 257px;
+    height: 14.385vw;
 }
 .select_btn {
     width: 100%;
-    height: 5vh;
+    height: 3vw;
     border: 1px solid #E2E2E2;
     display: flex;
     justify-content: center;
@@ -670,24 +669,14 @@ body{
     border-radius: 4px;
     cursor: pointer;
 }
-.select_btn_login {
-    width: 100%;
-    height: 5vh;
-    border: 1px solid #E2E2E2;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 4px;
-    background: #cccccc;
-}
 .Title {
     display: flex;
     align-items: center;
     justify-content: space-around;
     flex-direction: column;
     width: 100%;
-    height: 11vh;
-    margin-top: 5vh;
+    height: 7vw;
+    margin-top: 3vw;
 }
 .Title .text {
     font-size: 1.8vw;
@@ -699,11 +688,11 @@ body{
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-top: 4vh;
+    margin-top: 3vw;
 }
 #secondPage .operationa_contain {
-    width: 940px;
-    height: 570px;
+    width: 48.958vw;
+    height: 29.688vw;
     position: relative;
 }
 #secondPage .operationa_contain .bg2{
@@ -727,7 +716,7 @@ body{
 #secondPage .operationa_contain .bg1 {
     position: absolute;
     left: 0;
-    top: 10px;
+    top: 0.521vw;
     width: 97.8%;
     height: 90%;
     background: url(/img/supplier-login/oprate/bg_2.png) no-repeat;
@@ -735,8 +724,8 @@ body{
     background-position: right;
 }
 #secondPage .operationa_contain .bg4 {
-    left: 6px;
-    top: 14px;
+    left: 0.312vw;
+    top: 0.729vw;
     width: 70%;
     height: 100%;
     background: url(/img/supplier-login/oprate/bg_1.png) no-repeat;
@@ -745,17 +734,17 @@ body{
     z-index: -1;
 }
 .operationa_contain .online_store {
-    width: 400px;
-    height: 70px;
+    width: 20.833vw;
+    height: 3.646vw;
     position: absolute;
     display: flex;
     align-items: center;
-    left: 75px;
-    top: 45px;
+    left: 3.906vw;
+    top: 2.344vw;
     border-bottom: 2px solid #FFCEAF;
 }
 .operationa_contain .online_store .online_logo {
-    width: 62px;
+    width: 3.229vw;
     height: 100%;
     border-bottom: 6px solid #FFC39A;
     border-radius: 4px;
@@ -764,23 +753,23 @@ body{
     background-position: top;
 }
 .online_title {
-    font-size: 1.8vw;
+    font-size: 1.458vw;
     font-weight: bold;
-    margin-left: 20px;
+    margin-left: 1.042vw;
 }
 .operationa_contain .author_active {
-    width: 400px;
-    height: 70px;
+    width: 20.833vw;
+    height: 3.646vw;
     position: absolute;
     display: flex;
     align-items: center;
-    right: 75px;
-    top: 45px;
+    right: 3.906vw;
+    top: 2.344vw;
     border-bottom: 2px solid #FFCEAF;
     flex-direction: row-reverse;
 }
 .operationa_contain .author_active .online_logo {
-    width: 62px;
+    width: 3.229vw;
     height: 100%;
     border-bottom: 6px solid #FFC39A;
     border-radius: 4px;
@@ -788,27 +777,17 @@ body{
     background-size: contain;
     background-position: top;
 }
-.online_title {
-    font-size: 1.8vw;
-    font-weight: bold;
-    margin-right: 20px;
-}
 .operationa_contain .online {
-    width: 383px;
-    height: 53px;
+    width: 19.948vw;
+    height: 2.76vw;
     position: absolute;
     display: flex;
     align-items: center;
-    left: 56px;
-    top: 37px;
-}
-.online_title {
-    font-size: 28px;
-    font-weight: bold;
-    margin-right: 20px;
+    left: 2.917vw;
+    top: 1.927vw;
 }
 .operationa_contain .online .online_logo{
-    width: 62px;
+    width: 3.229vw;
     height: 100%;
     border-radius: 4px;
     background: url(/img/supplier-login/oprate/house.png) no-repeat;
@@ -816,30 +795,30 @@ body{
     background-position: top;
 }
 .operationa_contain .author {
-    width: 222px;
-    height: 65px;
+    width: 11.562vw;
+    height: 3.385vw;
     position: absolute;
     display: flex;
     align-items: center;
-    right: 40px;
-    top: 20px;
+    right: 2.084vw;
+    top: 1.042vw;
 }
 .operationa_contain .author .author_logo {
-    height: 65px;
-    width: 65px;
+    height: 3.385vw;
+    width: 3.385vw;
     background: url(/img/supplier-login/oprate/z.png) no-repeat;
     background-size: contain;
 }
 .operationa_contain .author .author_title {
-    font-size: 28px;
+    font-size: 1.458vw;
     color: #FFFFFF;
 }
 .operationa_contain .contain {
-    width: 690px;
-    height: 400px;
+    width: 35.938vw;
+    height: 20.833vw;
     position: absolute;
-    left: 120px;
-    top: 133px;
+    left: 6.25vw;
+    top: 6.927vw;
     display: flex;
     justify-content: space-around;
     align-items: center;
@@ -847,20 +826,20 @@ body{
 }
 .operationa_contain .contain .contain_logo {
     width: 100%;
-    height: 150px;
+    height: 7.812vw;
     background: url(/img/supplier-login/oprate/title.png) no-repeat;
     background-size: contain;
     background-position: center;
 }
 .operationa_contain .contain .contain_list {
     width: 100%;
-    height: 200px;
+    height: 10.417vw;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 .operationa_contain .contain .contain_list .list_item {
-    width: 200px;
+    width: 10.417vw;
     height: 100%;
     display: flex;
     flex-direction: column;
@@ -868,41 +847,41 @@ body{
     justify-content: space-around;
     align-items: center;
     background: #FDF0E9;
-    box-shadow: 0px 6px 50px 0px rgba(255,91,0,0.24);
-    border-radius: 16px;
-    padding: 20px;
+    box-shadow: 0px 6px 50px 0px rgba(255, 91, 0, 0.24);
+    border-radius: 0.833vw;
+    padding: 1.042vw;
     box-sizing: border-box;
 }
 .operationa_contain .contain .contain_list .list_item:nth-child(2){
     margin: 0 1%;
 }
 .operationa_contain .contain .contain_list .list_item:nth-child(1) div:nth-child(1) {
-    width: 80px;
-    height: 50px;
+    width: 4.167vw;
+    height: 2.604vw;
     background: url(/img/supplier-login/oprate/p.png) no-repeat;
     background-size: contain;
     background-position: center;
 }
 .operationa_contain .contain .contain_list .list_item:nth-child(2) div:nth-child(1) {
-    width: 80px;
-    height: 50px;
+    width: 4.167vw;
+    height: 2.604vw;
     background: url(/img/supplier-login/oprate/l.png) no-repeat;
     background-size: contain;
     background-position: center;
 }
 .operationa_contain .contain .contain_list .list_item:nth-child(3) div:nth-child(1) {
-    width: 80px;
-    height: 50px;
+    width: 4.167vw;
+    height: 2.604vw;
     background: url(/img/supplier-login/oprate/s.png) no-repeat;
     background-size: contain;
     background-position: center;
 }
 .operationa_contain .athor_contain {
-    width: 690px;
-    height: 400px;
+    width: 35.938vw;
+    height: 20.833vw;
     position: absolute;
-    left: 120px;
-    top: 133px;
+    left: 6.25vw;
+    top: 6.927vw;
     display: flex;
     justify-content: space-around;
     align-items: center;
@@ -910,14 +889,14 @@ body{
 }
 .operationa_contain .athor_contain .athor_contain_logo {
     width: 100%;
-    height: 150px;
+    height: 7.812vw;
     background: url(/img/supplier-login/oprate/author/logo.png) no-repeat;
     background-size: contain;
     background-position: center;
 }
 .operationa_contain .athor_contain .athor_contain_list {
     width: 100%;
-    height: 200px;
+    height: 10.417vw;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -925,43 +904,46 @@ body{
 }
 .athor_contain_list .list_item {
     width: 97%;
-    height: 25%;
     border: 1px solid #FFC9A9;
-    border-radius: 50px;
+    border-radius: 2.604vw;
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
+    height: 27%;
 }
 .athor_contain_list .list_item:nth-child(1) .list_item_logo  {
     background: url(/img/supplier-login/oprate/author/02.png) no-repeat;
     background-size: contain;
     background-position: center;
-    width: 42px;
-    height: 50px;
+    width: 2.188vw;
+    height: 2.604vw;
     position: absolute;
-    left: 10px;
-    top: 0;
+    left: 0.521vw;
+    top: 50%;
+    transform: translate(0, -50%);
 }
 .athor_contain_list .list_item:nth-child(2) .list_item_logo  {
     background: url(/img/supplier-login/oprate/author/03.png) no-repeat;
     background-size: contain;
     background-position: center;
-    width: 42px;
-    height: 50px;
+    width: 2.188vw;
+    height: 2.604vw;
     position: absolute;
-    left: 10px;
-    top: 0;
+    left: 0.521vw;
+    top: 50%;
+    transform: translate(0, -50%);
 }
 .athor_contain_list .list_item:nth-child(3) .list_item_logo  {
     background: url(/img/supplier-login/oprate/author/04.png) no-repeat;
     background-size: contain;
     background-position: center;
-    width: 42px;
-    height: 50px;
+    width: 2.188vw;
+    height: 2.604vw;
     position: absolute;
-    left: 10px;
-    top: 0;
+    left: 0.521vw;
+    top: 50%;
+    transform: translate(0, -50%);
 }
 
 .athor_contain_list .list_item .text_contain{
@@ -974,30 +956,30 @@ body{
     color: #FFC9A9;
 }
 .athor_contain_list .list_item .text_contain .text_contain_item {
-    font-size: 16px;
+    font-size: 0.833vw;
     font-weight: bold;
 }
 .athor_contain_list .list_item .text_contain .text_contain_item2 {
     width: 1px;
-    height: 20px;
+    height: 1.042vw;
     background: #ffe2d3;
-    margin: 0 10px;
+    margin: 0 0.521vw;
 }
 .athor_contain_list .list_item .text_contain .text_contain_item3 {
-    font-size: 16px;
+    font-size: 0.833vw;
 }
 #thirdPage {
     background: #fff;
 }
 .pageInner {
-    height: 80vh;
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
+    margin-top: 10vw;
 }
 .pageInner .container {
-    width: 1200px;
+    width: 62.5vw;
     height: 20vw;
     display: flex;
     justify-content: space-between;
@@ -1074,7 +1056,7 @@ body{
 .container_item .container_item_active .item_contant {
     display: none;
     color: #666666;
-    font-size: 18px;
+    font-size: 0.938vw;
     width: 80%;
 }
 .container_item .container_item_active .item_logo {
@@ -1276,7 +1258,7 @@ body{
     margin-bottom: 2vw;
 }
 #fourPage .el-carousel__item .logo_text .analysis {
-    font-size: 0.8vw;
+    font-size: 0.9vw;
     line-height: 2vw;
     text-overflow: ellipsis;
     display: -webkit-box;
@@ -1290,15 +1272,13 @@ body{
 }
 #fivePage .inner_contain {
     width: 100%;
-    height: 67vh;
-    margin-top: 7vh;
+    margin-top: 4vw;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 #fivePage .inner_contain .inner {
     width: 64%;
-    height: 100%;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -1306,13 +1286,14 @@ body{
 }
 #fivePage .inner_contain .inner .caimei_introduction {
     color: white;
-    font-size: 18px;
-    width: 1200px;
+    font-size: 0.938vw;
+    width: 62.5vw;
     height: auto;
-    padding: 3vh;
+    padding: 2vw;
     background-color: rgba(255,255,255, 0.2);
     box-sizing: border-box;
-    line-height: 40px;
+    line-height: 2.083vw;
+    margin-bottom: 5vw;
 }
 #fivePage .inner_contain .inner .caimei_report {
     width: 90%;
@@ -1394,7 +1375,7 @@ body{
     background: #fff;
 }
 #sixPage .community {
-    width: 1200px;
+    width: 62.5vw;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -1427,17 +1408,16 @@ body{
     font-size: 1vw;
 }
 .community .community_list {
-    width: 1200px;
+    width: 62.5vw;
     display: grid;
-    /*justify-content: space-between;*/
     grid-template-columns: repeat(4, 1fr);
     align-items: center;
     overflow: hidden;
-    grid-row-gap: 10px;
+    grid-row-gap: 0.521vw;
 }
 .community_list .video_list_item {
-    width: 280px;
-    height: 260px;
+    width: 14.583vw;
+    height: 13.542vw;
     box-sizing: border-box;
     padding-top: 5px;
     display: flex;
@@ -1448,8 +1428,8 @@ body{
     cursor: pointer;
 }
 .community_list .article_list_item {
-    width: 280px;
-    height: 260px;
+    width: 14.583vw;
+    height: 13.542vw;
     box-sizing: border-box;
     padding-top: 5px;
     display: flex;
@@ -1502,12 +1482,12 @@ body{
 }
 .video_list_item_content .video_title {
     width: 100%;
-    height: 100px;
+    height: 5.208vw;
     box-sizing: border-box;
-    font-size: 18px;
+    font-size: 0.938vw;
     align-items: center;
-    padding: 20px;
-    line-height: 38px;
+    padding: 1.042vw;
+    line-height: 1.979vw;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
@@ -1596,10 +1576,10 @@ body{
 .community_content {
     padding: 0 4%;
     width: 100%;
-    height: 40px;
+    height: 2.083vw;
     overflow: hidden;
     white-space: normal;
-    font-size: 14px;
+    font-size: 0.729vw;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-box-orient: vertical;

src/main/resources/templates/supplier_login/index.html

@@ -276,8 +276,8 @@
                             <div class="contain_list" v-cloak>
                                 <div class="list_item" v-for="item in contain_list" :key="item.id">
                                     <div></div>
-                                    <div style="font-weight: bold;font-size: 20px;">{{item.title}}</div>
-                                    <div style="font-size: 16px;text-align: center;color: #666666; height: 15px;">{{item.content}}</div>
+                                    <div style="font-weight: bold;font-size: 1.042vw;white-space: nowrap;">{{item.title}}</div>
+                                    <div style="font-size: 0.833vw;text-align: center;color: #666666;">{{item.content}}</div>
                                 </div>
                             </div>
                         </div>
@@ -362,7 +362,7 @@
                         了解已合作品牌的真实推广案例，借鉴成功经验助力<br />有效推广，实现商业目标
                     </div>
                 </div>
-                <div style="display: flex;justify-content: center;align-items: center;margin-top: 10vh;" v-if="isPC">
+                <div style="display: flex;justify-content: center;align-items: center;margin-top: 4vw;" v-if="isPC">
                     <div class="pageInner_contain">
                         <div class="nextChange" @click="nextPageCar">
                             <</div>
@@ -441,7 +441,7 @@
                                     <div class="video_list_item" :style="{marginLeft: item.id!==1 ? '1%' : '0'}" v-for="item in videoList" :key="item.id" @click="playerOn(item.cmBrandFiles[0].ossUrl)" v-if="item.pcStatus == '1'">
                                         <div class="video_list_item_content">
                                             <div class="player_bg">
-                                                <el-image style="width: 50px; height: 50px" src="/img/supplier-login/player.png" fit="contain"></el-image>
+                                                <el-image style="width: 2.604vw; height: 2.604vw" src="/img/supplier-login/player.png" fit="contain"></el-image>
                                             </div>
                                             <div class="video_player">
                                                 <el-image :src="item.headAppBanner" fit="contain"></el-image>