修改合卡

qingyiay

2023-09-18 40ce9965257472d715d072647796ac91c3932d73

 components/combined-title/combined-title.vue

@@ -3,20 +3,15 @@
      <view class="title_wrapper">
         <!-- 开始 -->
         <view class="title_start">
            <view class="icon">
            </view>
            <view class="text">
               {{title}}
            </view>
            <view class="icon"></view>
            <view class="text">{{ title }}</view>
         </view>

         <!-- 结尾 -->
         <view class="title_end" v-if="$slots.rightText">
            <view class="title_end_text" @click="rightTextClick">
               <image src="../../static/image/无人值守/联合 1.png" mode=""></image>
               <text>
                  <slot name="rightText"></slot>
               </text>
               <image src="https://mx.jzeg.cn:9095/appimg/image/banner/add.png" mode=""></image>
               <text><slot name="rightText"></slot></text>
            </view>
         </view>
      </view>
@@ -24,65 +19,63 @@
</template>

<script>
   export default {
      name:"combined-title",
      data() {
         return {

         };
      },
      props:{
         title:{
            type:String,
            default:''
         }
      },
      methods:{
         rightTextClick(){
            this.$emit('rightText')
         }
export default {
   name: 'combined-title',
   data() {
      return {};
   },
   props: {
      title: {
         type: String,
         default: ''
      }
   },
   methods: {
      rightTextClick() {
         this.$emit('rightText');
      }
   }
};
</script>

<style lang="scss" scope>
   .title{
      width:100%;
      margin:vww(16) auto ;
      .title_wrapper{
         height:vww(14);
         display:flex;
         justify-content: space-between;
         align-items: center;
         box-sizing: border-box;
          .title_start{
             .icon{
                display:inline-block;
                width:vww(4);
                height:vww(12);
                background-color: #007AFF;
                border-radius: vww(2);
             }
             .text{
                 display:inline-block;
                  margin-left:vww(8);
                  font-size: vww(16);
             }
          }
          .title_end{
             .title_end_text{
                display: flex;
                align-items: center;
                image{
                   margin-right:vww(8);
                   width:vww(21);
                   height:vww(21);
                }
                text{
                   font-size: vww(16);
                }
             }
          }
.title {
   width: 100%;
   margin: vww(16) auto;
   .title_wrapper {
      height: vww(14);
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      .title_start {
         .icon {
            display: inline-block;
            width: vww(4);
            height: vww(12);
            background-color: #007aff;
            border-radius: vww(2);
         }
         .text {
            display: inline-block;
            margin-left: vww(8);
            font-size: vww(16);
         }
      }
      .title_end {
         .title_end_text {
            display: flex;
            align-items: center;
            image {
               margin-right: vww(8);
               width: vww(21);
               height: vww(21);
            }
            text {
               font-size: vww(16);
            }
         }
      }
   }
}
</style>