document internationalization
This commit is contained in:
就眠儀式
@@ -1,16 +0,0 @@
|
||||
@import "../../theme/variable.less";
|
||||
|
||||
.layui-elem-quote {
|
||||
margin-bottom: 10px;
|
||||
padding: 15px;
|
||||
line-height: 1.6;
|
||||
border-left: 5px solid @global-checked-color;
|
||||
border-radius: 0 2px 2px 0;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.layui-quote-nm {
|
||||
border-style: solid;
|
||||
border-width: 1px 1px 1px 5px;
|
||||
background: 0 0;
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LayBlock",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import "./index.less";
|
||||
|
||||
const props = defineProps<{
|
||||
nm?: boolean | string;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<blockquote class="layui-elem-quote" :class="{ 'layui-quote-nm': nm }">
|
||||
<slot></slot>
|
||||
</blockquote>
|
||||
</template>
|
||||
@@ -0,0 +1,38 @@
|
||||
|
||||
@import "../../theme/variable.less";
|
||||
|
||||
@field-border-color: var(--field-border-color);
|
||||
@field-border-radius: var(--field-border-radius);
|
||||
|
||||
:root {
|
||||
--field-border-color: @global-border-color;
|
||||
--field-border-radius: @global-border-radius;
|
||||
}
|
||||
|
||||
.layui-field {
|
||||
margin-bottom: 10px;
|
||||
padding: 0;
|
||||
border-width: 1px;
|
||||
border-color: @field-border-color;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.layui-field legend {
|
||||
margin-left: 20px;
|
||||
padding: 0 10px;
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.layui-field-title {
|
||||
margin: 10px 0 20px;
|
||||
border-width: 1px 0 0;
|
||||
}
|
||||
|
||||
.layui-field-box {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.layui-field-title .layui-field-box {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
@@ -5,6 +5,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import "./index.less";
|
||||
import { useSlots } from "vue";
|
||||
|
||||
const slot = useSlots();
|
||||
@@ -17,14 +18,14 @@ const props = defineProps<LayFieldProps>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<fieldset v-if="slot.default" class="layui-elem-field">
|
||||
<fieldset v-if="slot.default" class="layui-field">
|
||||
<legend>{{ title }}</legend>
|
||||
<div class="layui-field-box">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset v-else class="layui-elem-field layui-field-title">
|
||||
<fieldset v-else class="layui-field layui-field-title">
|
||||
<legend>
|
||||
<a name="docend">{{ title }}</a>
|
||||
</legend>
|
||||
|
||||
22
src/component/quote/index.less
Normal file
22
src/component/quote/index.less
Normal file
@@ -0,0 +1,22 @@
|
||||
@import "../../theme/variable.less";
|
||||
|
||||
@block-default-color: var(--block-default-color);
|
||||
@block-border-radius: var(--block-border-radius);
|
||||
|
||||
:root {
|
||||
--block-default-color: @global-checked-color;
|
||||
--block-border-radius: @global-border-radius;
|
||||
}
|
||||
|
||||
.layui-quote {
|
||||
padding: 15px;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 10px;
|
||||
border-left: 5px solid @block-default-color;
|
||||
border-radius: @block-border-radius;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.layui-quote-nm {
|
||||
border-left: 5px solid #eee;
|
||||
}
|
||||
22
src/component/quote/index.vue
Normal file
22
src/component/quote/index.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LayQuote",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import "./index.less";
|
||||
|
||||
export interface LayQuoteProps {
|
||||
type?: string;
|
||||
}
|
||||
|
||||
const props = defineProps<LayQuoteProps>();
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<blockquote class="layui-quote" :class="[type ? `layui-quote-${props.type}` : '']">
|
||||
<slot></slot>
|
||||
</blockquote>
|
||||
</template>
|
||||
@@ -39,3 +39,21 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.layui-select {
|
||||
height: 38px;
|
||||
line-height: 1.3;
|
||||
line-height: 38px\9;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
background-color: #fff;
|
||||
border-color: #eee;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
border-radius: 2px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.layui-select::-webkit-input-placeholder {
|
||||
line-height: 1.3;
|
||||
}
|
||||
@@ -1,38 +1,39 @@
|
||||
.lay-skeleton{
|
||||
.lay-skeleton {
|
||||
|
||||
.lay-skeleton-item {
|
||||
height: 16px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 16px;
|
||||
background: #eeeeee;
|
||||
}
|
||||
.lay-skeleton-type--p{
|
||||
.lay-skeleton-type--p {
|
||||
height: 16px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 16px;
|
||||
background: #eeeeee;
|
||||
}
|
||||
|
||||
.lay-skeleton-type--image{
|
||||
.lay-skeleton-type--image {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
background: #eeeeee;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
i{
|
||||
i {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lay-skeleton-animated {
|
||||
.lay-skeleton-type--image{
|
||||
.lay-skeleton-type--image {
|
||||
width: 240px;
|
||||
height: 240px !important;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
i{
|
||||
i {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
@@ -41,16 +42,12 @@
|
||||
border-radius: 5px;
|
||||
margin-bottom: 16px;
|
||||
background: #eeeeee;
|
||||
background: linear-gradient(
|
||||
90deg,#f2f2f2 25%,#ececec 37%,#f2f2f2 63%);
|
||||
background: linear-gradient(90deg, #f2f2f2 25%, #ececec 37%, #f2f2f2 63%);
|
||||
background-size: 400% 100%;
|
||||
animation: lay-skeleton-loading 1.2s ease infinite;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.lay-skeleton-first {
|
||||
width: 30%;
|
||||
}
|
||||
@@ -59,8 +56,6 @@
|
||||
width: 62.8%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@keyframes lay-skeleton-loading {
|
||||
0% {
|
||||
background-position: 100% 50%;
|
||||
@@ -69,4 +64,4 @@
|
||||
100% {
|
||||
background-position: 0 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,116 @@
|
||||
@import "../../theme/variable.less";
|
||||
|
||||
@transfer-box-border-radius: var(--transfer-box-border-radius);
|
||||
|
||||
:root {
|
||||
--transfer-box-border-radius: @global-border-radius;
|
||||
}
|
||||
|
||||
.layui-transfer .layui-btn + .layui-btn {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.layui-transfer-box,
|
||||
.layui-transfer-header,
|
||||
.layui-transfer-search {
|
||||
border-width: 0;
|
||||
border-style: solid;
|
||||
border-color: #eee;
|
||||
}
|
||||
|
||||
.layui-transfer-box {
|
||||
position: relative;
|
||||
border-width: 1px;
|
||||
width: 200px;
|
||||
height: 360px;
|
||||
border-radius: @transfer-box-border-radius;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.layui-transfer-box .layui-form-checkbox {
|
||||
width: 100%;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.layui-transfer-header {
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
padding: 0 10px;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
.layui-transfer-search {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
.layui-transfer-search .layui-input {
|
||||
height: 32px;
|
||||
padding-left: 30px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.layui-transfer-search .layui-icon-search {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 50%;
|
||||
margin-top: -8px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.layui-transfer-active {
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
.layui-transfer-active .layui-btn {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
background-color: #5fb878;
|
||||
border-color: #5fb878;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.layui-transfer-active .layui-btn-disabled {
|
||||
background-color: #fbfbfb;
|
||||
border-color: #eee;
|
||||
color: #d2d2d2;
|
||||
}
|
||||
|
||||
.layui-transfer-active .layui-btn:first-child {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.layui-transfer-active .layui-btn .layui-icon {
|
||||
margin: 0;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.layui-transfer-data {
|
||||
padding: 5px 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.layui-transfer-data li {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.layui-transfer-data li:hover {
|
||||
background-color: #f6f6f6;
|
||||
transition: 0.5s all;
|
||||
}
|
||||
|
||||
.layui-transfer-data .layui-none {
|
||||
padding: 15px 10px;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.layui-transfer-active,
|
||||
.layui-transfer-box {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@@ -29,7 +29,7 @@ import LayCol from "./component/col/index";
|
||||
import LayRow from "./component/row/index";
|
||||
import LayInput from "./component/input/index";
|
||||
import LayBadge from "./component/badge/index";
|
||||
import LayBlock from "./component/block/index";
|
||||
import LayQuote from "./component/quote/index";
|
||||
import LayLine from "./component/line/index";
|
||||
import LayTimeline from "./component/timeline/index";
|
||||
import LayTimelineItem from "./component/timelineItem/index";
|
||||
@@ -100,7 +100,7 @@ const components: Record<string, Component> = {
|
||||
LayCol,
|
||||
LayInput,
|
||||
LayBadge,
|
||||
LayBlock,
|
||||
LayQuote,
|
||||
LayLine,
|
||||
LayTimeline,
|
||||
LayTimelineItem,
|
||||
@@ -182,7 +182,7 @@ export {
|
||||
LayCol,
|
||||
LayInput,
|
||||
LayBadge,
|
||||
LayBlock,
|
||||
LayQuote,
|
||||
LayLine,
|
||||
LayTimeline,
|
||||
LayTimelineItem,
|
||||
|
||||
@@ -309,33 +309,6 @@ a cite {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.layui-elem-field {
|
||||
margin-bottom: 10px;
|
||||
padding: 0;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.layui-elem-field legend {
|
||||
margin-left: 20px;
|
||||
padding: 0 10px;
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.layui-field-title {
|
||||
margin: 10px 0 20px;
|
||||
border-width: 1px 0 0;
|
||||
}
|
||||
|
||||
.layui-field-box {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.layui-field-title .layui-field-box {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.layui-progress {
|
||||
position: relative;
|
||||
height: 6px;
|
||||
@@ -510,7 +483,6 @@ a cite {
|
||||
.layui-colla-content,
|
||||
.layui-colla-item,
|
||||
.layui-collapse,
|
||||
.layui-elem-field,
|
||||
.layui-form-pane .layui-form-item[pane],
|
||||
.layui-form-pane .layui-form-label,
|
||||
.layui-iconpicker,
|
||||
@@ -519,7 +491,6 @@ a cite {
|
||||
.layui-layedit,
|
||||
.layui-layedit-tool,
|
||||
.layui-quote-nm,
|
||||
.layui-select,
|
||||
.layui-tab-bar,
|
||||
.layui-tab-card,
|
||||
.layui-tab-title,
|
||||
@@ -691,25 +662,6 @@ a cite {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.layui-select {
|
||||
height: 38px;
|
||||
line-height: 1.3;
|
||||
line-height: 38px\9;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
background-color: #fff;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
border-radius: @global-border-radius;
|
||||
}
|
||||
|
||||
.layui-select::-webkit-input-placeholder {
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.layui-select {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.layui-form input[type="checkbox"],
|
||||
.layui-form input[type="radio"],
|
||||
.layui-form select {
|
||||
@@ -2776,12 +2728,6 @@ body .layui-util-face .layui-layer-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layui-transfer-active,
|
||||
.layui-transfer-box {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.layui-util-face ul {
|
||||
position: relative;
|
||||
width: 372px;
|
||||
@@ -2823,105 +2769,6 @@ body .layui-util-face .layui-layer-content {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.layui-transfer-box,
|
||||
.layui-transfer-header,
|
||||
.layui-transfer-search {
|
||||
border-width: 0;
|
||||
border-style: solid;
|
||||
border-color: #eee;
|
||||
}
|
||||
|
||||
.layui-transfer-box {
|
||||
position: relative;
|
||||
border-width: 1px;
|
||||
width: 200px;
|
||||
height: 360px;
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.layui-transfer-box .layui-form-checkbox {
|
||||
width: 100%;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.layui-transfer-header {
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
padding: 0 10px;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
.layui-transfer-search {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
.layui-transfer-search .layui-input {
|
||||
height: 32px;
|
||||
padding-left: 30px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.layui-transfer-search .layui-icon-search {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 50%;
|
||||
margin-top: -8px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.layui-transfer-active {
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
.layui-transfer-active .layui-btn {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
background-color: @global-checked-color;
|
||||
border-color: @global-checked-color;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.layui-transfer-active .layui-btn-disabled {
|
||||
background-color: #fbfbfb;
|
||||
border-color: #eee;
|
||||
color: #d2d2d2;
|
||||
}
|
||||
|
||||
.layui-transfer-active .layui-btn:first-child {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.layui-transfer-active .layui-btn .layui-icon {
|
||||
margin: 0;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.layui-transfer-data {
|
||||
padding: 5px 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.layui-transfer-data li {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.layui-transfer-data li:hover {
|
||||
background-color: #f6f6f6;
|
||||
transition: 0.5s all;
|
||||
}
|
||||
|
||||
.layui-transfer-data .layui-none {
|
||||
padding: 15px 10px;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.layui-colorpicker {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
|
||||
Reference in New Issue
Block a user