修改前端页面

kongdeqiang

2023-09-12 eadd5784244d98dca21e5788440004432af8e803

 src/components/page/invoice/middlePge.vue

@@ -1,21 +1,7 @@
<template>
   <div class="middlePge-wrap">
       <div class="middlePge-main">
           <div class="middlePge-block">
               <div class="num">1</div>
               <div class="wenzi-box">
                   <h1>点击右上角的</h1>
                   <div>...</div>
                   <h1>按钮</h1>
               </div>
           </div>
           <div class="middlePge-block">
               <div class="num">2</div>
               <div class="wenzi-box">
                   <h1>选择</h1>
                   <div>在浏览器中打开</div>
               </div>
           </div>
           <img src="../../../assets/images/middlePage.png" alt="">
       </div>
   </div>
</template>
@@ -38,40 +24,8 @@
      .middlePge-main{
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          padding: 18.67vw  /* 140/7.5 */ 5.33vw  /* 40/7.5 */;
          box-sizing: border-box;
          .middlePge-block{
              display: flex;
              margin-top: 6.67vw  /* 50/7.5 */;
              .num{
                  width: 5.33vw  /* 40/7.5 */;
                  height: 5.33vw  /* 40/7.5 */;
                  background: #f84e01;
                  border-radius: 50%;
                  line-height: 5.33vw;
                  text-align: center;
                  color: #fff;
              }
              .wenzi-box{
                  display: flex;
                  h1{
                      font-size: 3.73vw  /* 28/7.5 */;
                      color: #fff;
                      font-weight: normal;
                      letter-spacing: 2px;
                  }
                  div{
                      display: block;
                      border-radius: 1.33vw  /* 10/7.5 */;
                      box-shadow: 0 0 10px rgba(0,0,0,1);
                      padding: 0 2.67vw  /* 20/7.5 */;
                      color: #fff;
                      background-image: linear-gradient(to bottom,#49545a,#202227);
                      margin: 0 2px;
                  }
              }
          img{
              width: 100%;
          }
      }
  }