页面样式及功能更新

GULIMMO

2023-11-13 5abafa3610cc7d6398e2a5a9caf6efd6d37efe5b

 subPackage/workbench/components/boxTitle/index.vue

@@ -1,93 +1,102 @@
<template>
   <view class="cur-container" :style="{color: color}">
      <view class="l">
         <view class="title">
            <view>
               {{title}}
            </view>

            <view class="title-more">
               <slot name="titleMore"></slot>
            </view>
         </view>
         <view class="bg-box">

         </view>
      </view>
      <view class="r">
         <view class="more">
            <slot name="more"></slot>
         </view>
      </view>
   </view>
</template>

<script>
   export default {
      props: {
         title: {
            type: String,
            default: ''
         },
         color: {
            type: String,
            default: '#000'
         }
      },

      methods: {

      }
   }
</script>

<style lang="scss" scoped>
   .cur-container {
      padding: 0 10rpx;
      height: 60rpx;
      justify-content: space-between;
      align-items: center;

      .l {
         height: 100%;
         display: flex;
         justify-content: flex-start;

         position: relative;

         .title {
            display: flex;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(0, -50%);
<template>

   <view class="cur-container" :style="{color: color}">

      <view class="l">

         <view class="title">

            <view class="line"></view>

            <view>

               {{title}}

            </view>



            <view class="title-more">

               <slot name="titleMore"></slot>

            </view>

         </view>

         <view class="bg-box">



         </view>

      </view>

      <view class="r">

         <view class="more">

            <slot name="more"></slot>

         </view>

      </view>

   </view>

</template>



<script>

   export default {

      props: {

         title: {

            type: String,

            default: ''

         },

         color: {

            type: String,

            default: '#000'

         }

      },



      methods: {



      }

   }

</script>



<style lang="scss" scoped>

   .cur-container {

      // padding: 0 10rpx;

      height: 60rpx;

      justify-content: space-between;

      align-items: center;



      .l {

         height: 100%;

         display: flex;

         justify-content: flex-start;

			
         position: relative;



         .title {

            display: flex;

            position: absolute;

            top: 50%;

            left: 0;

            transform: translate(0, -50%);

            z-index: 99;

            .title-more {
               margin-left: 20rpx;
            }
         }

         .bg-box {
            position: absolute;
            top: 50%;
            bottom: 0;
            width: 96rpx;
            background: linear-gradient(to right, #2991faff, #73A2F900);
            z-index: 1;
         }
      }

      .r {
         height: 100%;
         display: flex;
         justify-content: flex-end;

         .more {
            display: flex;
            justify-content: center;
            align-items: center;
         }
      }
   }
            align-items: center;



            .line {

               width: 6rpx;

               height: 30rpx;

               margin-right: 10rpx;

               background-color: #017BFC;

            }



            .title-more {

               margin-left: 20rpx;

            }

         }



         .bg-box {

            // position: absolute;

            // top: 50%;

            // bottom: 0;

            // width: 96rpx;

            // background: linear-gradient(to right, #2991faff, #73A2F900);

            // z-index: 1;

         }

      }



      .r {

         height: 100%;

         display: flex;

         justify-content: flex-end;



         .more {

            display: flex;

            justify-content: center;

            align-items: center;

         }

      }

   }

</style>