mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
component css
This commit is contained in:
parent
4589081506
commit
c4b59b4a7b
@ -1,15 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<a class="z-cell" :href="url" @click="handleClick">
|
<a class="z-cell" :href="url" @click="handleClick">
|
||||||
<div class="z-cell-title">
|
<div class="z-cell__title">
|
||||||
<slot name="icon">
|
<slot name="icon">
|
||||||
<i v-if="icon" class="zui-icon" :class="'zui-icon-' + icon"></i>
|
<i v-if="icon" class="zui-icon" :class="'zui-icon-' + icon"></i>
|
||||||
</slot>
|
</slot>
|
||||||
<slot name="title">
|
<slot name="title">
|
||||||
<span class="z-cell-text" v-text="title"></span>
|
<span class="z-cell-text" v-text="title"></span>
|
||||||
<span class="z-cell-label" v-if="label" v-text="label"></span>
|
<span class="z-cell__abel" v-if="label" v-text="label"></span>
|
||||||
</slot>
|
</slot>
|
||||||
</div>
|
</div>
|
||||||
<div class="z-cell-value" :class="{ 'is-link' : isLink }">
|
<div class="z-cell__value" :class="{ 'is-link' : isLink }">
|
||||||
<slot>
|
<slot>
|
||||||
<span v-text="value"></span>
|
<span v-text="value"></span>
|
||||||
</slot>
|
</slot>
|
||||||
|
@ -8,7 +8,7 @@
|
|||||||
}">
|
}">
|
||||||
<textarea
|
<textarea
|
||||||
v-if="type === 'textarea'"
|
v-if="type === 'textarea'"
|
||||||
class="z-field-control"
|
class="z-field__control"
|
||||||
v-model="currentValue"
|
v-model="currentValue"
|
||||||
@change="$emit('change', currentValue)"
|
@change="$emit('change', currentValue)"
|
||||||
:placeholder="placeholder"
|
:placeholder="placeholder"
|
||||||
@ -18,7 +18,7 @@
|
|||||||
</textarea>
|
</textarea>
|
||||||
<input
|
<input
|
||||||
v-else
|
v-else
|
||||||
class="z-field-control"
|
class="z-field__control"
|
||||||
:value="currentValue"
|
:value="currentValue"
|
||||||
@change="$emit('change', currentValue)"
|
@change="$emit('change', currentValue)"
|
||||||
@input="handleInput"
|
@input="handleInput"
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
@import "./mixins/border_retina.pcss";
|
@import "./mixins/border_retina.pcss";
|
||||||
|
|
||||||
@component-namespace z {
|
@component-namespace z {
|
||||||
@component cell-group {
|
@b cell-group {
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
@ -11,7 +11,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@component cell {
|
@b cell {
|
||||||
display: block;
|
display: block;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -33,19 +33,19 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@descendent title {
|
@empty-cells: show title {
|
||||||
float: left;
|
float: left;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
@descendent label {
|
@e label {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
color: #666;
|
color: #666;
|
||||||
}
|
}
|
||||||
|
|
||||||
@descendent value {
|
@e value {
|
||||||
float: right;
|
float: right;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
|
@ -2,46 +2,46 @@
|
|||||||
@import "./mixins/border_retina.pcss";
|
@import "./mixins/border_retina.pcss";
|
||||||
|
|
||||||
@component-namespace z {
|
@component-namespace z {
|
||||||
@component field {
|
@b field {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
@when textarea {
|
@when textarea {
|
||||||
.z-field-control {
|
.z-field__control {
|
||||||
min-height: 60px;
|
min-height: 60px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@when nolabel {
|
@when nolabel {
|
||||||
.z-cell-title {
|
.z-cell__title {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.z-cell-value {
|
.z-cell__value {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.z-cell-title,
|
.z-cell__title,
|
||||||
.z-cell-value {
|
.z-cell__value {
|
||||||
float: none;
|
float: none;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.z-cell-title {
|
.z-cell__title {
|
||||||
width: 90px;
|
width: 90px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10px;
|
top: 10px;
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.z-cell-value {
|
.z-cell__value {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-left: 90px;
|
padding-left: 90px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.z-field-control {
|
@e control {
|
||||||
border: 0;
|
border: 0;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user