current position:Home>Vue custom text background

Vue custom text background

2022-04-29 20:22:10nicepainkiller

Functional context : There is a title ; The content changes are estimated to be 20+ Kind of

General practice : Cutaway is also part of the team's proposition , It's also possible to cut dozens of pictures , But what? As an old driver , I want to try something else The way to challenge   And get in the car :

Here's a summary of two approaches :

Method 1 : With the of content change Change in length ; The hardest part is With the process of graphics !

  In fact, this background image is Split up Several pieces Of , It's kind of similar I played when I was a child Neves ( It seems that when I was a child Neves Not in vain, hahaha );

The code is as follows The code is not organized Let's get together and watch , Just look at your ideas

<template>
  <view class="card-title">
    <view class="card-box">
      <view class="box-left1">
        <view class="box-left1-child">
        </view>
      </view>
      <view class="box-left">
      </view>
      <view class="box-mid">
        {
   {title}}
      </view>
      <view class="box-right">
        <view class="right01">
          <view class="right01-box">

          </view>
        </view>
      </view>

    </view>
  </view>
</template>

<script>
  export default {
    props: {
      title: {
        type: String,
        default: " Who am I? I'm there "
      }
    }
  }
</script>

<style lang="scss" scoped>
  .card-title {
    .card-box {
      margin-left: 200rpx;
      height: 62rpx;

      background-color: #007AFF;
      overflow: hidden;

      .box-left1 {
        position: relative;
        width: 28rpx;
        height: 55rpx;
        //background-color: #007AFF;
        background: linear-gradient(180deg, #22dab2 0%, #0fb37b);

        .box-left1-child {
          position: absolute;
          top: -5rpx;
          left: -53rpx;
          width: 80rpx;
          height: 60rpx;
          background-color: #007AFF;
          border-top-right-radius: 40rpx;
          //background: linear-gradient(180deg, #22dab2 0%, #0fb37b);
        }

        //background-color: #219df0;

      }

      .box-left {
        border-bottom-left-radius: 25rpx;
        width: 40rpx;
        height: 55rpx;
        background: linear-gradient(180deg, #22dab2 0%, #0fb37b);
        //background-color: #F0AD4E;
        //background: linear-gradient(180deg, #22dab2 0%, #0fb37b);
      }

      .box-mid {
        line-height: 58rpx;
        height: 55rpx;
        background: linear-gradient(180deg, #22dab2 0%, #0fb37b);
        color: #FFFFFF;
      }

      .box-right {
        position: relative;
        border-top-right-radius: 40rpx;
        width: 40rpx;
        height: 55rpx;
        background: linear-gradient(180deg, #22dab2 0%, #0fb37b);
        //background-color: #F0AD4E;
        //background: linear-gradient(180deg, #22dab2 0%, #0fb37b);

        .right01 {
          position: absolute;
          right: 0;
          bottom: -10rpx;
          height: 10rpx;
          width: 10rpx;
          background-color: #0fb37b;
          //background: linear-gradient(180deg, #22dab2 0%, #0fb37b);

          .right01-box {
            position: absolute;
            left: -10rpx;
            top: 0rpx;
            height: 30rpx;
            width: 20rpx;
            border-radius: 50%;
            background-color: #007AFF;
          }
        }
      }
    }
  }
</style>

Where to call :

<template>
  <view class="task-wait">
    <card-title :title=title></card-title>
    <card-title :title=title2></card-title>
    <card-title :title=title3></card-title>
    <card-title :title=title4></card-title>
  </view>
</template>

Let's open the background again : In this way, it can be easily seen

  Is it clear at a glance ! In fact, that is The idea of Tangram , Splicing Cover up

Method 2 : Here is also the use of splicing ; But it's using Mosaic of pictures ; We Put the irregular parts at both ends Cut out , The middle part is a gradient with upper limit We can be a program Draw it and you can With content Hold up !

  Then the code is very simple ;

<view class="right-title">
  <view class="background-left">
  </view>
  <view class="background-mid">
     Medical assistance   Medical assistance   Medical assistance 
  </view>
  <view class="background-right">
  </view>
</view>



.right-title {
  position: absolute;
  right: 0;
  top: 0;
  height: 62rpx;
  display: flex;
  flex-direction: row;
  .background-left {
    width: 40rpx;
    height: 50rpx;
    // background-color: #007AFF;
    background-size: 100% 58rpx;
    background-repeat: no-repeat;
    background-image: url(../../../../static/app/title-left.png);
  }

  .background-mid {
    height: 50rpx;
    padding: 0 10rpx;
    line-height: 50rpx;
    color: #FFFFFF;
    // background-color: #3F536E;
    background-image: linear-gradient(180deg, #22dab2 0%, #0fb37b);
  }

  .background-right {
    height: 58rpx;
    width: 24rpx;
    // background-color: #007AFF;
    background-size: 100% 60rpx;
    background-repeat: no-repeat;
    background-image: url(../../../../static/app/title-right.png);
  }
}

The following is the effect :

Method 3 : Before doing game When There is a kind of picture called Nine palace chart ; You can stretch at will Key points will remain proportional , I checked the information ,css Without direct support , You need to do it yourself ; This can be placed in There's time later We can Study carefully

copyright notice
author[nicepainkiller],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291613378319.html

Random recommended