|
|
@@ -1,8 +1,11 @@
|
|
|
<template>
|
|
|
<view class="waterfalls-flow">
|
|
|
- <view v-for="(item,index) in data.column" :key="index" class="waterfalls-flow-column" :id="`waterfalls_flow_column_${index+1}`" :msg="msg" :style="{'width':w,'margin-left':index==0?0:m}">
|
|
|
- <view :class="['column-value',{'column-value-show':item2.o}]" v-for="(item2,index2) in columnValue(index)" :key="index2" :style="[s1]" @click.stop="wapperClick(item2)">
|
|
|
- <view class="inner" v-if="data.seat==1">
|
|
|
+ <view v-for="(item, index) in data.column" :key="index" class="waterfalls-flow-column"
|
|
|
+ :id="`waterfalls_flow_column_${index + 1}`" :msg="msg"
|
|
|
+ :style="{ 'width': w, 'margin-left': index == 0 ? 0 : m }">
|
|
|
+ <view :class="['column-value', { 'column-value-show': item2.o }]" v-for="(item2, index2) in columnValue(index)"
|
|
|
+ :key="index2" :style="[s1]" @click.stop="wapperClick(item2)">
|
|
|
+ <view class="inner" v-if="data.seat == 1">
|
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
|
<!-- #ifdef VUE2 -->
|
|
|
<slot name="slot{{item2.index}}"></slot>
|
|
|
@@ -15,8 +18,11 @@
|
|
|
<slot v-bind="item2"></slot>
|
|
|
<!-- #endif -->
|
|
|
</view>
|
|
|
- <image :class="['img',{'img-hide':item2[hideImageKey]==true||item2[hideImageKey]==1},{'img-error':!item2[data.imageKey]}]" :src="item2[data.imageKey]" mode="widthFix" @load="imgLoad(item2,index+1)" @error="imgError(item2,index+1)" @click.stop="imageClick(item2)"></image>
|
|
|
- <view class="inner" v-if="data.seat==2">
|
|
|
+ <image
|
|
|
+ :class="['img', { 'img-hide': item2[hideImageKey] == true || item2[hideImageKey] == 1 }, { 'img-error': !item2[data.imageKey] }]"
|
|
|
+ :src="item2[data.imageKey]" mode="widthFix" @load="imgLoad(item2, index + 1)"
|
|
|
+ @error="imgError(item2, index + 1)" @click.stop="imageClick(item2)"></image>
|
|
|
+ <view class="inner" v-if="data.seat == 2">
|
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
|
<!-- #ifdef VUE2 -->
|
|
|
<slot name="slot{{item2.index}}"></slot>
|
|
|
@@ -34,290 +40,292 @@
|
|
|
</view>
|
|
|
</template>
|
|
|
<script>
|
|
|
- export default {
|
|
|
- props: {
|
|
|
- value: Array,
|
|
|
- column: { // 列的数量
|
|
|
- type: [String, Number],
|
|
|
- default: 2
|
|
|
- },
|
|
|
- maxColumn: { // 最大列数
|
|
|
- type: [String, Number],
|
|
|
- default: 5
|
|
|
- },
|
|
|
- columnSpace: { // 列之间的间距 百分比
|
|
|
- type: [String, Number],
|
|
|
- default: 2
|
|
|
- },
|
|
|
- imageKey: { // 图片key
|
|
|
- type: [String],
|
|
|
- default: 'image'
|
|
|
- },
|
|
|
- hideImageKey: { // 隐藏图片key
|
|
|
- type: [String],
|
|
|
- default: 'hide'
|
|
|
- },
|
|
|
- seat: { // 文本的位置，1图片之上 2图片之下
|
|
|
- type: [String, Number],
|
|
|
- default: 2
|
|
|
- },
|
|
|
- listStyle: { // 单个展示项的样式：eg:{'background':'red'}
|
|
|
- type: Object
|
|
|
- }
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ value: Array,
|
|
|
+ column: { // 列的数量
|
|
|
+ type: [String, Number],
|
|
|
+ default: 2
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- data: {
|
|
|
- list: this.value ? this.value : [],
|
|
|
- column: this.column < 2 ? 2 : this.column,
|
|
|
- columnSpace: this.columnSpace <= 5 ? this.columnSpace : 5,
|
|
|
- imageKey: this.imageKey,
|
|
|
- seat: this.seat
|
|
|
- },
|
|
|
- msg: 0,
|
|
|
- listInitStyle: {
|
|
|
- 'border-radius': '12rpx',
|
|
|
- 'margin-bottom': '20rpx',
|
|
|
- 'background-color': '#fff'
|
|
|
- },
|
|
|
- adds: [], //预置数据
|
|
|
- isLoaded: true,
|
|
|
- curIndex: 0,
|
|
|
- isRefresh: true,
|
|
|
- flag: false,
|
|
|
- refreshDatas: []
|
|
|
- }
|
|
|
+ maxColumn: { // 最大列数
|
|
|
+ type: [String, Number],
|
|
|
+ default: 5
|
|
|
},
|
|
|
- computed: {
|
|
|
- // 计算列宽
|
|
|
- w() {
|
|
|
- const column_rate = `${100 / this.data.column - (+this.data.columnSpace)}%`;
|
|
|
- return column_rate;
|
|
|
- },
|
|
|
- // 计算margin
|
|
|
- m() {
|
|
|
- const column_margin = `${(100-(100 / this.data.column - (+this.data.columnSpace)).toFixed(5)*this.data.column)/(this.data.column-1)}%`;
|
|
|
- return column_margin;
|
|
|
- },
|
|
|
- // list样式
|
|
|
- s1() {
|
|
|
- return { ...this.listInitStyle, ...this.listStyle };
|
|
|
- }
|
|
|
+ columnSpace: { // 列之间的间距 百分比
|
|
|
+ type: [String, Number],
|
|
|
+ default: 2
|
|
|
},
|
|
|
- created() {
|
|
|
- // 初始化
|
|
|
- this.refresh();
|
|
|
+ imageKey: { // 图片key
|
|
|
+ type: [String],
|
|
|
+ default: 'image'
|
|
|
},
|
|
|
- methods: {
|
|
|
- // 预加载图片
|
|
|
- loadImages(idx = 0) {
|
|
|
- let count = 0;
|
|
|
- const newList = this.data.list.filter((item, index) => index >= idx);
|
|
|
- for (let i = 0; i < newList.length; i++) {
|
|
|
- // #ifndef APP-PLUS
|
|
|
- uni.getImageInfo({
|
|
|
- src: `${newList[i][this.imageKey]}.jpg`,
|
|
|
- complete: res => {
|
|
|
- count++;
|
|
|
- if (count == newList.length) this.initValue(idx);
|
|
|
- }
|
|
|
- })
|
|
|
- // #endif
|
|
|
- // #ifdef APP-PLUS
|
|
|
- plus.io.getImageInfo({
|
|
|
- src: `${newList[i][this.imageKey]}.jpg`,
|
|
|
- complete: res => {
|
|
|
- count++;
|
|
|
- if (count == newList.length) this.initValue(idx);
|
|
|
- }
|
|
|
- })
|
|
|
- // #endif
|
|
|
- }
|
|
|
- },
|
|
|
- // 刷新
|
|
|
- refresh() {
|
|
|
- if (!this.isLoaded) {
|
|
|
- this.refreshDatas = this.value;
|
|
|
- return false;
|
|
|
- };
|
|
|
- setTimeout(() => {
|
|
|
- this.refreshDatas = [];
|
|
|
- this.isRefresh = true;
|
|
|
- this.adds = [];
|
|
|
- this.data.list = this.value ? this.value : [];
|
|
|
- this.data.column = this.column < 2 ? 2 : this.column >= this.maxColumn ? this.maxColumn : this.column;
|
|
|
- this.data.columnSpace = this.columnSpace <= 5 ? this.columnSpace : 5;
|
|
|
- this.data.imageKey = this.imageKey;
|
|
|
- this.data.seat = this.seat;
|
|
|
- this.curIndex = 0;
|
|
|
- // 每列的数据初始化
|
|
|
- for (let i = 1; i <= this.data.column; i++) {
|
|
|
- this.data[`column_${i}_values`] = [];
|
|
|
- this.msg++;
|
|
|
- }
|
|
|
- this.$nextTick(() => {
|
|
|
- this.initValue(this.curIndex, 'refresh==>');
|
|
|
- })
|
|
|
- }, 1)
|
|
|
+ hideImageKey: { // 隐藏图片key
|
|
|
+ type: [String],
|
|
|
+ default: 'hide'
|
|
|
+ },
|
|
|
+ seat: { // 文本的位置，1图片之上 2图片之下
|
|
|
+ type: [String, Number],
|
|
|
+ default: 2
|
|
|
+ },
|
|
|
+ listStyle: { // 单个展示项的样式：eg:{'background':'red'}
|
|
|
+ type: Object
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ data: {
|
|
|
+ list: this.value ? this.value : [],
|
|
|
+ column: this.column < 2 ? 2 : this.column,
|
|
|
+ columnSpace: this.columnSpace <= 5 ? this.columnSpace : 5,
|
|
|
+ imageKey: this.imageKey,
|
|
|
+ seat: this.seat
|
|
|
},
|
|
|
- columnValue(index) {
|
|
|
- return this.data[`column_${index+1}_values`];
|
|
|
+ msg: 0,
|
|
|
+ listInitStyle: {
|
|
|
+ 'border-radius': '12rpx',
|
|
|
+ 'margin-bottom': '20rpx',
|
|
|
+ 'background-color': '#fff'
|
|
|
},
|
|
|
- change(newValue) {
|
|
|
- for (let i = 0; i < this.data.list.length; i++) {
|
|
|
- const cv = this.data[`column_${this.data.list[i].column}_values`];
|
|
|
- for (let j = 0; j < cv.length; j++) {
|
|
|
- if (newValue[i] && i === cv[j].index) {
|
|
|
- this.data[`column_${this.data.list[i].column}_values`][j] = Object.assign(cv[j], newValue[i]);
|
|
|
- this.msg++;
|
|
|
- break;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- getMin(a, s) {
|
|
|
- let m = a[0][s];
|
|
|
- let mo = a[0];
|
|
|
- for (var i = a.length - 1; i >= 0; i--) {
|
|
|
- if (a[i][s] < m) {
|
|
|
- m = a[i][s];
|
|
|
+ adds: [], //预置数据
|
|
|
+ isLoaded: true,
|
|
|
+ curIndex: 0,
|
|
|
+ isRefresh: true,
|
|
|
+ flag: false,
|
|
|
+ refreshDatas: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // 计算列宽
|
|
|
+ w() {
|
|
|
+ const column_rate = `${100 / this.data.column - (+this.data.columnSpace)}%`;
|
|
|
+ return column_rate;
|
|
|
+ },
|
|
|
+ // 计算margin
|
|
|
+ m() {
|
|
|
+ const column_margin = `${(100 - (100 / this.data.column - (+this.data.columnSpace)).toFixed(5) * this.data.column) / (this.data.column - 1)}%`;
|
|
|
+ return column_margin;
|
|
|
+ },
|
|
|
+ // list样式
|
|
|
+ s1() {
|
|
|
+ return { ...this.listInitStyle, ...this.listStyle };
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // 初始化
|
|
|
+ this.refresh();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 预加载图片
|
|
|
+ loadImages(idx = 0) {
|
|
|
+ let count = 0;
|
|
|
+ const newList = this.data.list.filter((item, index) => index >= idx);
|
|
|
+ for (let i = 0; i < newList.length; i++) {
|
|
|
+ // #ifndef APP-PLUS
|
|
|
+ uni.getImageInfo({
|
|
|
+ src: `${newList[i][this.imageKey]}.jpg`,
|
|
|
+ complete: res => {
|
|
|
+ count++;
|
|
|
+ if (count == newList.length) this.initValue(idx);
|
|
|
}
|
|
|
- }
|
|
|
- mo = a.filter(i => i[s] == m);
|
|
|
- return mo[0];
|
|
|
- },
|
|
|
- // 计算每列的高度
|
|
|
- getMinColumnHeight() {
|
|
|
- return new Promise(resolve => {
|
|
|
- const heightArr = [];
|
|
|
- for (let i = 1; i <= this.data.column; i++) {
|
|
|
- const query = uni.createSelectorQuery().in(this);
|
|
|
- query.select(`#waterfalls_flow_column_${i}`).boundingClientRect(data => {
|
|
|
- heightArr.push({ column: i, height: data.height });
|
|
|
- }).exec(() => {
|
|
|
- if (this.data.column <= heightArr.length) {
|
|
|
- resolve(this.getMin(heightArr, 'height'));
|
|
|
- }
|
|
|
- });
|
|
|
+ })
|
|
|
+ // #endif
|
|
|
+ // #ifdef APP-PLUS
|
|
|
+ plus.io.getImageInfo({
|
|
|
+ src: `${newList[i][this.imageKey]}.jpg`,
|
|
|
+ complete: res => {
|
|
|
+ count++;
|
|
|
+ if (count == newList.length) this.initValue(idx);
|
|
|
}
|
|
|
})
|
|
|
- },
|
|
|
- async initValue(i, from) {
|
|
|
- this.isLoaded = false;
|
|
|
- if (i >= this.data.list.length || this.refreshDatas.length) {
|
|
|
+ // #endif
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 刷新
|
|
|
+ refresh() {
|
|
|
+ if (!this.isLoaded) {
|
|
|
+ this.refreshDatas = this.value;
|
|
|
+ return false;
|
|
|
+ };
|
|
|
+ setTimeout(() => {
|
|
|
+ this.refreshDatas = [];
|
|
|
+ this.isRefresh = true;
|
|
|
+ this.adds = [];
|
|
|
+ this.data.list = this.value ? this.value : [];
|
|
|
+ this.data.column = this.column < 2 ? 2 : this.column >= this.maxColumn ? this.maxColumn : this.column;
|
|
|
+ this.data.columnSpace = this.columnSpace <= 5 ? this.columnSpace : 5;
|
|
|
+ this.data.imageKey = this.imageKey;
|
|
|
+ this.data.seat = this.seat;
|
|
|
+ this.curIndex = 0;
|
|
|
+ // 每列的数据初始化
|
|
|
+ for (let i = 1; i <= this.data.column; i++) {
|
|
|
+ this.data[`column_${i}_values`] = [];
|
|
|
this.msg++;
|
|
|
- this.loaded();
|
|
|
- return false;
|
|
|
}
|
|
|
- const minHeightRes = await this.getMinColumnHeight();
|
|
|
- const c = this.data[`column_${minHeightRes.column}_values`];
|
|
|
- this.data.list[i].column = minHeightRes.column;
|
|
|
- c.push({ ...this.data.list[i], cIndex: c.length, index: i, o: 0 });
|
|
|
- this.msg++;
|
|
|
- },
|
|
|
- // 图片加载完成
|
|
|
- imgLoad(item, c) {
|
|
|
- const i = item.index;
|
|
|
- item.o = 1;
|
|
|
- this.$set(this.data[`column_${c}_values`], item.cIndex, JSON.parse(JSON.stringify(item)));
|
|
|
- this.initValue(i + 1);
|
|
|
- },
|
|
|
- // 图片加载失败
|
|
|
- imgError(item, c) {
|
|
|
- const i = item.index;
|
|
|
- item.o = 1;
|
|
|
- item[this.data.imageKey] = null;
|
|
|
- this.$set(this.data[`column_${c}_values`], item.cIndex, JSON.parse(JSON.stringify(item)));
|
|
|
- this.initValue(i + 1);
|
|
|
- },
|
|
|
- // 渲染结束
|
|
|
- loaded() {
|
|
|
- if (this.refreshDatas.length) {
|
|
|
- this.isLoaded = true;
|
|
|
- this.refresh();
|
|
|
- return false;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.initValue(this.curIndex, 'refresh==>');
|
|
|
+ })
|
|
|
+ }, 1)
|
|
|
+ },
|
|
|
+ columnValue(index) {
|
|
|
+ return this.data[`column_${index + 1}_values`];
|
|
|
+ },
|
|
|
+ change(newValue) {
|
|
|
+ for (let i = 0; i < this.data.list.length; i++) {
|
|
|
+ const cv = this.data[`column_${this.data.list[i].column}_values`];
|
|
|
+ for (let j = 0; j < cv.length; j++) {
|
|
|
+ if (newValue[i] && i === cv[j].index) {
|
|
|
+ this.data[`column_${this.data.list[i].column}_values`][j] = Object.assign(cv[j], newValue[i]);
|
|
|
+ this.msg++;
|
|
|
+ break;
|
|
|
+ }
|
|
|
}
|
|
|
- this.curIndex = this.data.list.length;
|
|
|
- if (this.adds.length) {
|
|
|
- this.data.list = this.adds[0];
|
|
|
- this.adds.splice(0, 1);
|
|
|
- this.initValue(this.curIndex);
|
|
|
- } else {
|
|
|
- if (this.data.list.length) this.$emit('loaded');
|
|
|
- this.isLoaded = true;
|
|
|
- this.isRefresh = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getMin(a, s) {
|
|
|
+ let m = a[0][s];
|
|
|
+ let mo = a[0];
|
|
|
+ for (var i = a.length - 1; i >= 0; i--) {
|
|
|
+ if (a[i][s] < m) {
|
|
|
+ m = a[i][s];
|
|
|
}
|
|
|
- },
|
|
|
- // 单项点击事件
|
|
|
- wapperClick(item) {
|
|
|
- this.$emit('wapperClick', item);
|
|
|
- },
|
|
|
- // 图片点击事件
|
|
|
- imageClick(item) {
|
|
|
- this.$emit('imageClick', item);
|
|
|
}
|
|
|
+ mo = a.filter(i => i[s] == m);
|
|
|
+ return mo[0];
|
|
|
},
|
|
|
- watch: {
|
|
|
- value: {
|
|
|
- deep: true,
|
|
|
- handler(newValue, oldValue) {
|
|
|
- setTimeout(() => {
|
|
|
- this.$nextTick(() => {
|
|
|
- if (this.isRefresh) return false;
|
|
|
- if (this.isLoaded) {
|
|
|
- // if (newValue.length <= this.curIndex) return this.refresh();
|
|
|
- if (newValue.length <= this.curIndex) return this.change(newValue);
|
|
|
- this.data.list = newValue;
|
|
|
- this.$nextTick(() => {
|
|
|
- this.initValue(this.curIndex, 'watch==>');
|
|
|
- })
|
|
|
- } else {
|
|
|
- this.adds.push(newValue);
|
|
|
- }
|
|
|
- })
|
|
|
- }, 10)
|
|
|
+ // 计算每列的高度
|
|
|
+ getMinColumnHeight() {
|
|
|
+ return new Promise(resolve => {
|
|
|
+ const heightArr = [];
|
|
|
+ for (let i = 1; i <= this.data.column; i++) {
|
|
|
+ const query = uni.createSelectorQuery().in(this);
|
|
|
+ query.select(`#waterfalls_flow_column_${i}`).boundingClientRect(data => {
|
|
|
+ heightArr.push({ column: i, height: data.height });
|
|
|
+ }).exec(() => {
|
|
|
+ if (this.data.column <= heightArr.length) {
|
|
|
+ resolve(this.getMin(heightArr, 'height'));
|
|
|
+ }
|
|
|
+ });
|
|
|
}
|
|
|
- },
|
|
|
- column(newValue) {
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async initValue(i, from) {
|
|
|
+ this.isLoaded = false;
|
|
|
+ if (i >= this.data.list.length || this.refreshDatas.length) {
|
|
|
+ this.msg++;
|
|
|
+ this.loaded();
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ const minHeightRes = await this.getMinColumnHeight();
|
|
|
+ const c = this.data[`column_${minHeightRes.column}_values`];
|
|
|
+ this.data.list[i].column = minHeightRes.column;
|
|
|
+ c.push({ ...this.data.list[i], cIndex: c.length, index: i, o: 0 });
|
|
|
+ this.msg++;
|
|
|
+ },
|
|
|
+ // 图片加载完成
|
|
|
+ imgLoad(item, c) {
|
|
|
+ const i = item.index;
|
|
|
+ item.o = 1;
|
|
|
+ this.$set(this.data[`column_${c}_values`], item.cIndex, JSON.parse(JSON.stringify(item)));
|
|
|
+ this.initValue(i + 1);
|
|
|
+ },
|
|
|
+ // 图片加载失败
|
|
|
+ imgError(item, c) {
|
|
|
+ const i = item.index;
|
|
|
+ item.o = 1;
|
|
|
+ item[this.data.imageKey] = null;
|
|
|
+ this.$set(this.data[`column_${c}_values`], item.cIndex, JSON.parse(JSON.stringify(item)));
|
|
|
+ this.initValue(i + 1);
|
|
|
+ },
|
|
|
+ // 渲染结束
|
|
|
+ loaded() {
|
|
|
+ if (this.refreshDatas.length) {
|
|
|
+ this.isLoaded = true;
|
|
|
this.refresh();
|
|
|
+ return false;
|
|
|
}
|
|
|
+ this.curIndex = this.data.list.length;
|
|
|
+ if (this.adds.length) {
|
|
|
+ this.data.list = this.adds[0];
|
|
|
+ this.adds.splice(0, 1);
|
|
|
+ this.initValue(this.curIndex);
|
|
|
+ } else {
|
|
|
+ if (this.data.list.length) this.$emit('loaded');
|
|
|
+ this.isLoaded = true;
|
|
|
+ this.isRefresh = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 单项点击事件
|
|
|
+ wapperClick(item) {
|
|
|
+ this.$emit('wapperClick', item);
|
|
|
+ },
|
|
|
+ // 图片点击事件
|
|
|
+ imageClick(item) {
|
|
|
+ this.$emit('imageClick', item);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ value: {
|
|
|
+ deep: true,
|
|
|
+ handler(newValue, oldValue) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (this.isRefresh) return false;
|
|
|
+ if (this.isLoaded) {
|
|
|
+ // if (newValue.length <= this.curIndex) return this.refresh();
|
|
|
+ if (newValue.length <= this.curIndex) return this.change(newValue);
|
|
|
+ this.data.list = newValue;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.initValue(this.curIndex, 'watch==>');
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.adds.push(newValue);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }, 10)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ column(newValue) {
|
|
|
+ this.refresh();
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</script>
|
|
|
+
|
|
|
<style lang="scss" scoped>
|
|
|
- .waterfalls-flow {
|
|
|
- overflow: hidden;
|
|
|
+.waterfalls-flow {
|
|
|
+ overflow: hidden;
|
|
|
|
|
|
- &-column {
|
|
|
- float: left;
|
|
|
- }
|
|
|
+ &-column {
|
|
|
+ float: left;
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- .column-value {
|
|
|
- width: 100%;
|
|
|
- font-size: 0;
|
|
|
- overflow: hidden;
|
|
|
- transition: opacity .4s;
|
|
|
- opacity: 0;
|
|
|
+.column-value {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ transition: opacity .4s;
|
|
|
+ opacity: 0;
|
|
|
|
|
|
- &-show {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
+ &-show {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
|
|
|
- .inner {
|
|
|
- font-size: 30rpx;
|
|
|
- }
|
|
|
+ .inner {
|
|
|
+ font-size: 30rpx;
|
|
|
+ }
|
|
|
|
|
|
- .img {
|
|
|
- width: 100%;
|
|
|
+ .img {
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 8px;
|
|
|
|
|
|
- &-hide {
|
|
|
- display: none;
|
|
|
- }
|
|
|
+ &-hide {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
|
|
|
- &-error {
|
|
|
- background: #f2f2f2 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAiAQMAAAAatXkPAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAAIZJREFUCNdlzjEKwkAUBNAfEGyCuYBkLyLuxRYW2SKlV1JSeA2tUiZg4YrLjv9PGsHqNTPMSAQuyAJgRDHSyvBPwtZoSJXakeJI9iuRLGDygdl6V0yKDtyMAeMPZySj8yfD+UapvRPj2JOwkyAooSV5IwdDjPdCPspe8LyTl9IKJvDETKKRv6vnlUasgg0fAAAAAElFTkSuQmCC) no-repeat center center;
|
|
|
- }
|
|
|
+ &-error {
|
|
|
+ background: #f2f2f2 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAiAQMAAAAatXkPAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAAIZJREFUCNdlzjEKwkAUBNAfEGyCuYBkLyLuxRYW2SKlV1JSeA2tUiZg4YrLjv9PGsHqNTPMSAQuyAJgRDHSyvBPwtZoSJXakeJI9iuRLGDygdl6V0yKDtyMAeMPZySj8yfD+UapvRPj2JOwkyAooSV5IwdDjPdCPspe8LyTl9IKJvDETKKRv6vnlUasgg0fAAAAAElFTkSuQmCC) no-repeat center center;
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</style>
|
