处理标题响应式

处理轮播，移动端不显示

pages/frontend/skill_cert/add.vue

@@ -122,13 +122,15 @@
         </p>
       </div>
 
-      <div class="col-title width-infinity jiedan-title">
-        <span class="label">他们正在接单</span>
-      </div>
+      <template v-if="!deviceType.ios && !deviceType.android">
+        <div class="col-title width-infinity jiedan-title">
+          <span class="label">他们正在接单</span>
+        </div>
 
-      <div class="job-member-area">
-        <job-member-list></job-member-list>
-      </div>
+        <div class="job-member-area">
+          <job-member-list></job-member-list>
+        </div>
+      </template>
        
       <el-dialog :visible.sync="dialogVisible">
         <img width="100%" :src="dialogImageUrl" alt="">

pages/frontend/skill_cert/components/skill-cert-activity.vue

@@ -1,13 +1,21 @@
 <template>
   <div class="activity-area">
     <div class="activity-container">
-      <div class="activity-title">100%接单限时活动 <span class="count-time">(剩余{{text}})</span></div>
+      <div class="activity-title">
+        <span class="text">100%接单限时活动</span>
+        <span class="count-time">(剩余{{ text }})</span>
+      </div>
+
       <div class="activity-list">
         <div class="activity-item">
           <h6>活动1（默认参与）：不接单全额退+赠送会</h6>
           <p>
             * 完成认证后，2个月内未成功接单，退还全部认证费用，并保留认证权益<br />
-            * 参与认证，赠送1个月<a  href="/type/vip/developer" class="color-4D81BF">开发者会员</a>
+            * 参与认证，赠送1个月<a
+              href="/type/vip/developer"
+              class="color-4D81BF"
+              >开发者会员</a
+            >
           </p>
         </div>
         <div class="activity-item">
@@ -27,58 +35,58 @@
 
 <script>
 export default {
-    data(){
-        return {
-            // 模拟结束时间，4月10号0点
-            endTime: 1649520000000,
-            pageNow: Date.now(),
-            serverTime: Date.now(),
-
-            text:"",
-            timer:null,
-        }
+  data() {
+    return {
+      // 模拟结束时间，4月10号0点
+      endTime: 1649520000000,
+      pageNow: Date.now(),
+      serverTime: Date.now(),
+
+      text: "",
+      timer: null
+    };
+  },
+  mounted() {
+    this.startTimer();
+  },
+  methods: {
+    startTimer() {
+      this.timer = setInterval(() => {
+        let now = Date.now();
+        let pageNow = this.pageNow;
+        let desc = now - pageNow;
+        let countDown = this.endTime - (this.serverTime + desc);
+        this.parseCountDownText(countDown);
+      }, 800);
     },
-    mounted () {
-        this.startTimer()
+    clearTimer() {
+      clearInterval(this.timer);
+      this.timer = null;
     },
-    methods: {
-        startTimer(){
-            this.timer = setInterval(()=>{
-                let now = Date.now();
-                let pageNow = this.pageNow
-                let desc = now - pageNow
-                let countDown = this.endTime - (this.serverTime +desc)
-                this.parseCountDownText(countDown)
-            },800);
-        },
-        clearTimer(){
-            clearInterval(this.timer);
-            this.timer = null;
-        },
-        // 以毫秒作为单位
-        parseCountDownText(countDown){
-            // 转换秒为单位
-            let countDownTime = Math.ceil(countDown/1000);
-
-            let day = parseInt(countDownTime/(24*60*60),10)
-            let dayText = day 
-            countDownTime = countDownTime - (day * 24*60*60)
-
-            let hour = parseInt(countDownTime/(60*60),10)
-            let hourText = hour > 9 ? hour : "0" + hour;
-
-            countDownTime = countDownTime - (hour * 60*60)
-
-            let minute = parseInt(countDownTime/(60),10)
-            let minuteText = minute > 9 ? minute : "0" + minute;
-
-            countDownTime = countDownTime - (minute * 60)
-            let second = countDownTime
-
-            let text = `${dayText}天${hourText}小时${minuteText}分钟${second}秒`
-            this.text = text
-        }
+    // 以毫秒作为单位
+    parseCountDownText(countDown) {
+      // 转换秒为单位
+      let countDownTime = Math.ceil(countDown / 1000);
+
+      let day = parseInt(countDownTime / (24 * 60 * 60), 10);
+      let dayText = day;
+      countDownTime = countDownTime - day * 24 * 60 * 60;
+
+      let hour = parseInt(countDownTime / (60 * 60), 10);
+      let hourText = hour > 9 ? hour : "0" + hour;
+
+      countDownTime = countDownTime - hour * 60 * 60;
+
+      let minute = parseInt(countDownTime / 60, 10);
+      let minuteText = minute > 9 ? minute : "0" + minute;
+
+      countDownTime = countDownTime - minute * 60;
+      let second = countDownTime;
+
+      let text = `${dayText}天${hourText}小时${minuteText}分钟${second}秒`;
+      this.text = text;
     }
+  }
 };
 </script>
 
@@ -89,31 +97,64 @@ export default {
 
 .activity-container {
   min-width: 670px;
-  background: #fff6f4 url("~@/assets/img/skill_cert/bg22.png") no-repeat 50% top;
-  background-size: 1048px auto;
-  padding-bottom:20px ;
+  // background: #fff6f4 url("~@/assets/img/skill_cert/bg22.png") no-repeat 50% top;
+  // background-size: 1048px auto;
+  padding-bottom: 20px;
+  background: #fff7f4;
+  padding-top: 70px;
+  position: relative;
 }
 
+%bg {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 85px;
+  z-index: 2;
+}
 .activity-title {
-  padding-top: 10px;
-  width: 470px;
-  margin: 0 auto;
+  position: absolute;
+  z-index: 3;
+  top: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+  height: 50px;
+  width: 430px;
+  text-align: center;
+
   font-size: 22px;
   font-family: PingFangSC-Medium, PingFang SC;
   font-weight: 500;
   color: #ffffff;
-  line-height: 30px;
+  line-height: 50px;
   text-shadow: 0px 2px 4px #ff5530;
   text-align: center;
-  .count-time{
-      font-size: 16px;
-      font-weight: normal !important;
-      font-family:PingFangSC-Regular, PingFang SC
+  background: url("~@/assets/img/skill_cert/bg_c.png") repeat left top;
+  .count-time {
+    font-size: 16px;
+    font-weight: normal !important;
+    font-family: PingFangSC-Regular, PingFang SC;
+  }
+  &::before {
+    @extend %bg;
+    left: 3px;
+    transform: translateX(-100%);
+    background: url("~@/assets/img/skill_cert/pc_l.png") no-repeat left top;
+    background-size: cover;
+  }
+  &::after {
+    @extend %bg;
+    right: 3px;
+    width: 88px;
+    transform: translateX(100%);
+    background: url("~@/assets/img/skill_cert/pc_r.png") no-repeat right top;
+    background-size: cover;
   }
 }
 
 .activity-list {
-  margin-top: 40px;
+  // margin-top: 40px;
   margin-left: 30px;
   margin-right: 30px;
   display: flex;
@@ -160,18 +201,55 @@ export default {
   line-height: 24px;
 }
 @media screen and (max-width: 670px) {
-    .activity-container{
-        // min-width: none;
-        min-width: inherit;
+  .activity-container {
+    min-width: inherit;
+  }
+  .activity-list {
+    display: block;
+  }
+  .activity-item {
+    width: auto;
+    margin-bottom: 30px;
+  }
+
+  .activity-title {
+    height: auto;
+    width:auto;
+    line-height: 1;
+    padding:7px 10px;
+    background: url("~@/assets/img/skill_cert/m_bg.png") repeat left top;
+    &::before {
+      background: url("~@/assets/img/skill_cert/m_l.png") no-repeat left top;
+      background-size: cover;
+      width:44px;
+      left:0;
+    }
+    &::after{
+      background: url("~@/assets/img/skill_cert/m_r.png") no-repeat left top;
+      background-size: auto 100%;
+      width:50px
     }
-    .activity-list{
-        display: block;
-        // flex-direction: column;
-        // align-items: center;
+    span {
+      display: block;
     }
-    .activity-item{
-        width: auto;
-        margin-bottom: 30px;
+    .text {
+      font-size: 20px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #ffffff;
+      line-height: 28px;
+      text-shadow: 0px 2px 4px #ff5530;
     }
+    .count-time {
+      margin-top: 2px;
+      font-size: 14px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: rgba(255, 255, 255, 0.8);
+      line-height: 20px;
+      width:180px;
+      text-align: center;
+    }
+  }
 }
 </style>