更改边框显示顺序
This commit is contained in:
parent
a899fec745
commit
c20bec67b8
@ -2,7 +2,6 @@ import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { SmallBorderConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
|
||||
export const option = {
|
||||
colors: ['#1089ff', '#0000ff'],
|
||||
@ -13,6 +12,6 @@ export default class Config extends PublicConfigClass implements CreateComponent
|
||||
public key = SmallBorderConfig.key
|
||||
public chartConfig = cloneDeep(SmallBorderConfig)
|
||||
public option = cloneDeep(option)
|
||||
public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 300, zIndex: 1 }
|
||||
|
||||
|
||||
}
|
||||
|
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="go-small-border">
|
||||
<div class="border-content">
|
||||
<div class="svg-content">
|
||||
<svg class="svg" viewBox="0 0 400 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="小标题">
|
||||
@ -82,7 +83,8 @@
|
||||
fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M365.197 15.341H368.568C368.664 15.3411 368.759 15.3691 368.84 15.4217C368.921 15.4743 368.985 15.5492 369.025 15.6375C369.065 15.7258 369.079 15.8238 369.065 15.9197C369.051 16.0157 369.009 16.1055 368.946 16.1785L366.928 20.2194C366.881 20.2735 366.823 20.3169 366.758 20.3467C366.693 20.3765 366.622 20.392 366.551 20.3922H363.18C363.083 20.3921 362.989 20.3641 362.908 20.3115C362.827 20.2589 362.763 20.184 362.723 20.0957C362.683 20.0074 362.669 19.9094 362.683 19.8135C362.697 19.7176 362.738 19.6277 362.802 19.5547L364.819 15.5138C364.866 15.4596 364.924 15.4161 364.989 15.3863C365.055 15.3566 365.125 15.3411 365.197 15.341Z"
|
||||
fill="#86C9EF" />
|
||||
<path id="标题框_4" fill-rule="evenodd" clip-rule="evenodd"
|
||||
<path id="标题框_4" fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M357.198 15.341H360.569C360.665 15.3411 360.76 15.3691 360.841 15.4217C360.922 15.4743 360.986 15.5492 361.026 15.6375C361.066 15.7258 361.079 15.8238 361.065 15.9197C361.051 16.0157 361.01 16.1055 360.947 16.1785L358.928 20.2194C358.881 20.2735 358.824 20.3169 358.759 20.3467C358.694 20.3765 358.623 20.392 358.552 20.3922H355.181C355.084 20.3921 354.99 20.3641 354.909 20.3115C354.828 20.2589 354.763 20.184 354.723 20.0957C354.684 20.0074 354.67 19.9094 354.684 19.8135C354.698 19.7176 354.739 19.6277 354.803 19.5547L356.82 15.5138C356.867 15.4596 356.925 15.4161 356.99 15.3863C357.055 15.3566 357.126 15.3411 357.198 15.341Z"
|
||||
fill="url(#paint9_linear_29_565)" />
|
||||
</g>
|
||||
@ -120,8 +122,8 @@
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M365.197 15.341H368.568C368.664 15.3411 368.759 15.3691 368.84 15.4217C368.921 15.4743 368.985 15.5492 369.025 15.6375C369.065 15.7258 369.079 15.8238 369.065 15.9197C369.051 16.0157 369.009 16.1055 368.946 16.1785L366.928 20.2194C366.881 20.2735 366.823 20.3169 366.758 20.3467C366.693 20.3765 366.622 20.392 366.551 20.3922H363.18C363.083 20.3921 362.989 20.3641 362.908 20.3115C362.827 20.2589 362.763 20.184 362.723 20.0957C362.683 20.0074 362.669 19.9094 362.683 19.8135C362.697 19.7176 362.738 19.6277 362.802 19.5547L364.819 15.5138C364.866 15.4596 364.924 15.4161 364.989 15.3863C365.055 15.3566 365.125 15.3411 365.197 15.341Z" />
|
||||
</clipPath>
|
||||
<filter id="filter3_di_29_565" x="15.9608" y="0" width="21.2381" height="23.4257" filterUnits="userSpaceOnUse"
|
||||
color-interpolation-filters="sRGB">
|
||||
<filter id="filter3_di_29_565" x="15.9608" y="0" width="21.2381" height="23.4257"
|
||||
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||||
result="hardAlpha" />
|
||||
@ -200,10 +202,12 @@
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="border-content">
|
||||
<div class="content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">export default { name: "SmallBorder" }</script>
|
||||
<style lang="scss" scoped>
|
||||
@ -258,6 +262,7 @@ $border-gradient-end: rgba(128, 128, 128, 0);
|
||||
}
|
||||
|
||||
& .svg-content {
|
||||
// z-index: 2;
|
||||
width: 100%;
|
||||
height: 12%;
|
||||
// background-color: antiquewhite;
|
||||
|
Loading…
Reference in New Issue
Block a user