diff --git a/front/src/views/home/components/header.vue b/front/src/views/home/components/header.vue index 3153f2e5..b04af039 100644 --- a/front/src/views/home/components/header.vue +++ b/front/src/views/home/components/header.vue @@ -24,8 +24,8 @@ version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2069" - width="40" - height="40" + width="0.4rem" + height="0.4rem" @click="goToSgc" > - + @@ -335,75 +335,75 @@ display: flex; flex-direction: column; align-items: center; - padding-bottom: 80px; - padding-top: 78px; + padding-bottom: .8rem; + padding-top: .78rem; .title { - font-size: 30px; + font-size: .3rem; font-family: 'convergence-typeface'; display: flex; flex-direction: column; align-items: center; - margin-bottom: 32px; + margin-bottom: .32rem; .title-son { - width: 34px; - height: 3px; + width: .34rem; + height: .03rem; background: #0058e1; - border-radius: 1px; - margin-top: 18px; + border-radius: .01rem; + margin-top: .18rem; } } .content { - width: 1300px; - height: 480px; + width: 13rem; + height: 4.8rem; display: flex; - padding-left: 20px; + padding-left: .2rem; .content-empty { - height: 220px; - padding-top: 49px; + height: 2.2rem; + padding-top: .49rem; } } .content > div { background: #f3f5f9; - border: #eaedf2 1px solid; + border: #eaedf2 .01rem solid; } .content > div:hover { - border-radius: 2px; - border: 1px solid #0058e1; - box-shadow: 0px 8px 20px rgba(0, 88, 225, 0.3); + border-radius: .02rem; + border: .01rem solid #0058e1; + box-shadow: 0rem .08rem .2rem rgba(0, 88, 225, 0.3); } .content-miaoshui { display: flex; flex-direction: column; - padding-top: 20px; + padding-top: .2rem; align-items: center; - padding-bottom: 10px; + padding-bottom: .1rem; .content-miaoshui-title { - padding-left: 5px; - padding-right: 5px; - font-size: 18px; + padding-left: .05rem; + padding-right: .05rem; + font-size: .18rem; font-weight: bold; - height: 30px; + height: .3rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; - margin-bottom: 12px; + margin-bottom: .12rem; word-break: break-all; } .content-miaoshui-content { - height: 120px; - width: 298px; - margin: 12px 10px 10px 10px; + height: 1.2rem; + width: 2.98rem; + margin: .12rem .1rem .1rem .1rem; font-family: text-typeface; - font-size: 14px; - line-height: 20px; + font-size: .14rem; + line-height: .2rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; - margin-bottom: 12px; + margin-bottom: .12rem; word-break: break-all; cursor: pointer; } @@ -413,18 +413,18 @@ display: flex; justify-content: space-between; align-items: bottom; - margin-right: 16px; - margin-left: 16px; + margin-right: .16rem; + margin-left: .16rem; div:first-child { - margin-left: 16px; + margin-left: .16rem; } } .shijain-content-bootom { - margin-right: 16px; - width: 80px; - height: 24px; + margin-right: .16rem; + width: .8rem; + height: .24rem; text-align: center; - border: 1px solid #0058e1; + border: .01rem solid #0058e1; cursor: pointer; color: #0058e1; } @@ -432,102 +432,102 @@ background: rgba(0, 88, 225, 0.3); } .content > div > div { - height: 240px; + height: 2.4rem; width: 100%; } .one { - height: 240px; + height: 2.4rem; display: flex; flex-direction: column; justify-content: center; align-items: center; background-size: 100%; - padding-top: 15px; + padding-top: .15rem; .shijain { - margin-top: 20px; + margin-top: .2rem; } :deep(.ant-imag) { text-align: center; } :deep(.ant-image-img) { - height: 210px; + height: 2.1rem; text-align: center; justify-content: center; align-items: center; width: 100%; - max-width: 298px; + max-width: 2.98rem; } } .bottom { - height: 24px; - font-size: 16px; - width: 100px; - margin-top: 40px; + height: .24rem; + font-size: .16rem; + width: 1rem; + margin-top: .4rem; cursor: pointer; text-align: center; color: #000000; .gengduo { display: inline-block; - margin-left: 4px; - width: 10px; - height: 10px; + margin-left: .04rem; + width: .1rem; + height: .1rem; background: url('~@/assets/newHome/gd2.png') no-repeat; background-position: center; } } .bottom:hover { - border-radius: 2px; + border-radius: .02rem; background-color: rgba(1, 102, 255, 0.1); } .content > div { - height: 480px; - width: 310px; - margin-right: 20px; + height: 4.8rem; + width: 3.1rem; + margin-right: .2rem; } .fixedmount { - height: 150px; + height: 1.5rem; display: flex; position: fixed; - bottom: 256px; - right: 190px; + bottom: 2.56rem; + right: 1.9rem; z-index: 10; flex-direction: column; justify-content: space-between; align-items: center; } .fixedmount div { - width: 70px; - height: 70px; - border-radius: 4px; - border: 1px #94aac9 solid; + width: .7rem; + height: .7rem; + border-radius: .04rem; + border: .01rem #94aac9 solid; display: flex; flex-direction: column; // justify-content: center; align-items: center; - padding-top: 13px; + padding-top: .13rem; position: relative; cursor: pointer; background: #e3edfc; } .fixedmount div p:nth-child(2) { position: absolute; - bottom: 0px; - height: 14px; - font-size: 14px; - line-height: 14px; + bottom: 0rem; + height: .14rem; + font-size: .14rem; + line-height: .14rem; color: #000000; - // margin-top: 8px; + // margin-top: .08rem; } .fixedmount div:nth-child(1) p:nth-child(1) { - height: 24px; - width: 24px; + height: .24rem; + width: .24rem; background: url('~@/assets/home/shenqing.png') no-repeat; background-size: cover; background-position: center; } .fixedmount div:nth-child(2) p:nth-child(1) { - height: 24px; - width: 24px; + height: .24rem; + width: .24rem; background: url('~@/assets/home/shangjia.png') no-repeat; } }