init
This commit is contained in:
Binary file not shown.
@@ -0,0 +1 @@
|
||||
.card-container{background:whitesmoke;padding:20px}
|
||||
@@ -0,0 +1,126 @@
|
||||
// 主题颜色
|
||||
// 浅色 --> 默认使用
|
||||
@ligh-background: #FFF;
|
||||
@ligh-color: #3a3a3a;
|
||||
|
||||
// 深色
|
||||
@dark-background: #353535;
|
||||
@dark-color: #FFF;
|
||||
|
||||
@border-clor: #cecece;
|
||||
|
||||
// 单一设置主题
|
||||
.single-theme(@position, @contrary_position, @margin_postion, @color, @m-border-color) {
|
||||
@attr : ~'[position=@{position}]';
|
||||
&{
|
||||
border: 1px solid @m-border-color;
|
||||
&@{attr}{
|
||||
margin-@{contrary_position}: 6px;
|
||||
.layui-popper-arrow {
|
||||
@{contrary_position}: -6px;
|
||||
border-@{contrary_position}-width: 0;
|
||||
border-@{position}-color: @m-border-color;
|
||||
&::after{
|
||||
@{contrary_position}: 1px;
|
||||
border-@{contrary_position}-width: 0;
|
||||
margin-@{margin_postion}: -6px;
|
||||
border-@{position}-color: @color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 统一设置四个方向的主题
|
||||
.theme(@background-color, @color, @border-color) {
|
||||
background-color: @background-color;
|
||||
color: @color;
|
||||
.single-theme(top, bottom, left, @background-color, @border-color);
|
||||
.single-theme(bottom, top, left, @background-color, @border-color);
|
||||
.single-theme(right, left, top, @background-color, @border-color);
|
||||
.single-theme(left, right, top, @background-color, @border-color);
|
||||
}
|
||||
|
||||
// 箭头默认居中
|
||||
.arrow-default-center(@position, @prop) {
|
||||
@attr : ~'[position=@{position}]';
|
||||
&@{attr} {
|
||||
.layui-popper-arrow{
|
||||
@{prop}: -moz-calc(50% - 6px);
|
||||
@{prop}: -webkit-calc(50% - 6px);
|
||||
@{prop}: calc(50% - 6px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.all-arrow-default-center() {
|
||||
.arrow-default-center(top, left);
|
||||
.arrow-default-center(bottom, left);
|
||||
.arrow-default-center(left, top);
|
||||
.arrow-default-center(right, top);
|
||||
}
|
||||
|
||||
// 填充popper，支持可以移动到popper使用到
|
||||
.single-fill-popper(@position, @contrary_position, @zeroPosition, @all, @seven){
|
||||
@attr : ~'[position=@{position}]';
|
||||
&@{attr}::after{
|
||||
@{contrary_position}: -7px;
|
||||
@{zeroPosition}: 0;
|
||||
@{all}: 100%;
|
||||
@{seven}: 7px;
|
||||
}
|
||||
}
|
||||
.fill-popper(){
|
||||
.single-fill-popper(top, bottom, left, width, height);
|
||||
.single-fill-popper(bottom, top, left, width, height);
|
||||
.single-fill-popper(left, right, bottom, height, width);
|
||||
.single-fill-popper(right, left, bottom, height, width);
|
||||
}
|
||||
|
||||
// 样式开始
|
||||
.layui-popper {
|
||||
position: fixed;
|
||||
padding: 10px;
|
||||
border-radius: 3px;
|
||||
word-wrap: break-word;
|
||||
min-width: 12px;
|
||||
min-height: 12px;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.15);
|
||||
.theme(@ligh-background, @ligh-color, @border-clor);
|
||||
max-width: 300px;
|
||||
z-index: 99999;
|
||||
|
||||
// 箭头默认居中
|
||||
.all-arrow-default-center();
|
||||
|
||||
&::after{
|
||||
content: " ";
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
// 填充
|
||||
.fill-popper();
|
||||
|
||||
.layui-popper-arrow {
|
||||
&,&::after{
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-width: 6px;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&::after{
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* 深色主题 */
|
||||
&.layui-dark {
|
||||
.theme(@dark-background, @dark-color, @dark-background);
|
||||
}
|
||||
|
||||
}
|
||||
Binary file not shown.
@@ -0,0 +1 @@
|
||||
.layui-line-horizontal{position:relative;clear:both;width:100%;min-width:100%;max-width:100%;margin:var(--layui-line-margin) 0;border-bottom:var(--layui-line-border-width) var(--layui-line-border-style) var(--global-neutral-color-5);border-top-style:none;border-left-style:none;border-right-style:none}.layui-line-horizontal.layui-line-with-text{margin:14px 0}.layui-line-vertical{display:inline-block;min-width:1px;max-width:1px;height:1em;margin:0 var(--layui-line-margin);vertical-align:middle;border-left:var(--layui-line-border-width) var(--layui-line-border-style) var(--global-neutral-color-5);border-top-style:none;border-bottom-style:none;border-right-style:none}.layui-line-text{position:absolute;top:50%;box-sizing:border-box;padding:0 10px;color:currentColor;line-height:2;background-color:#fff;transform:translateY(-50%)}.layui-line-text-center{left:var(--layui-line-text-offset);transform:translate(-50%,-50%)}.layui-line-text-left{left:var(--layui-line-text-offset)}.layui-line-text-right{right:var(--layui-line-text-offset)}
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
@@ -0,0 +1,20 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "PrevCircleIcon",
|
||||
};
|
||||
</script>
|
||||
<script setup lang="ts">
|
||||
import LayIcon from "../component/icon/index";
|
||||
|
||||
const props = defineProps<{
|
||||
color?: string;
|
||||
size?: string;
|
||||
}>();
|
||||
</script>
|
||||
<template>
|
||||
<lay-icon
|
||||
:color="props.color"
|
||||
:size="props.size"
|
||||
type="layui-icon-prev-circle"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1 @@
|
||||
x+)JMU07f040031Q<31><51>KI<4B><49>K..f<>f<EFBFBD>Z^<5E>Y<EFBFBD><59><15>d<EFBFBD>I<EFBFBD>i<EFBFBD><69>ק<EFBFBD>(<28><><EFBFBD>D<>5f+Y}<7D><>ֹ<EFBFBD><D6B9>\ֻ<><0F>"e<> <1D>
|
||||
Reference in New Issue
Block a user