<template>
|
<view>
|
<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">卡片</block></cu-custom>
|
<view class="cu-bar bg-white solid-bottom">
|
<view class="action">
|
<text class="cuIcon-titles text-orange"></text> 案例类卡片
|
</view>
|
<view class="action">
|
<switch :class="isCard?'checked':''" :checked="isCard?true:false" @change="IsCard"></switch>
|
</view>
|
</view>
|
<view class="cu-card case" :class="isCard?'no-card':''">
|
<view class="cu-item shadow">
|
<view class="image">
|
<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg"
|
mode="widthFix"></image>
|
<view class="cu-tag bg-blue">史诗</view>
|
<view class="cu-bar bg-shadeBottom"> <text class="text-cut">我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。</text></view>
|
</view>
|
<view class="cu-list menu-avatar">
|
<view class="cu-item">
|
<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
|
<view class="content flex-sub">
|
<view class="text-grey">正义天使 凯尔</view>
|
<view class="text-gray text-sm flex justify-between">
|
十天前
|
<view class="text-gray text-sm">
|
<text class="cuIcon-attentionfill margin-lr-xs"></text> 10
|
<text class="cuIcon-appreciatefill margin-lr-xs"></text> 20
|
<text class="cuIcon-messagefill margin-lr-xs"></text> 30
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="cu-bar bg-white solid-bottom" :class="isCard?'margin-top':''">
|
<view class="action">
|
<text class="cuIcon-titles text-orange "></text> 动态类卡片
|
</view>
|
<view class="action">
|
<switch :class="isCard?'checked':''" :checked="isCard?true:false" @change="IsCard"></switch>
|
</view>
|
</view>
|
<view class="cu-card dynamic" :class="isCard?'no-card':''">
|
<view class="cu-item shadow">
|
<view class="cu-list menu-avatar">
|
<view class="cu-item">
|
<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
|
<view class="content flex-sub">
|
<view>凯尔</view>
|
<view class="text-gray text-sm flex justify-between">
|
2019年12月3日
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="text-content">
|
折磨生出苦难，苦难又会加剧折磨，凡间这无穷的循环，将有我来终结！
|
</view>
|
<view class="grid flex-sub padding-lr" :class="isCard?'col-3 grid-square':'col-1'">
|
<view class="bg-img" :class="isCard?'':'only-img'" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"
|
v-for="(item,index) in isCard?9:1" :key="index">
|
</view>
|
</view>
|
<view class="text-gray text-sm text-right padding">
|
<text class="cuIcon-attentionfill margin-lr-xs"></text> 10
|
<text class="cuIcon-appreciatefill margin-lr-xs"></text> 20
|
<text class="cuIcon-messagefill margin-lr-xs"></text> 30
|
</view>
|
|
<view class="cu-list menu-avatar comment solids-top">
|
<view class="cu-item">
|
<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"></view>
|
<view class="content">
|
<view class="text-grey">莫甘娜</view>
|
<view class="text-gray text-content text-df">
|
凯尔，你被自己的光芒变的盲目。
|
</view>
|
<view class="bg-grey padding-sm radius margin-top-sm text-sm">
|
<view class="flex">
|
<view>凯尔：</view>
|
<view class="flex-sub">妹妹，你在帮他们给黑暗找借口吗?</view>
|
</view>
|
</view>
|
<view class="margin-top-sm flex justify-between">
|
<view class="text-gray text-df">2018年12月4日</view>
|
<view>
|
<text class="cuIcon-appreciatefill text-red"></text>
|
<text class="cuIcon-messagefill text-gray margin-left-sm"></text>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<view class="cu-item">
|
<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
|
<view class="content">
|
<view class="text-grey">凯尔</view>
|
<view class="text-gray text-content text-df">
|
妹妹，如果不是为了飞翔，我们要这翅膀有什么用?
|
</view>
|
<view class="bg-grey padding-sm radius margin-top-sm text-sm">
|
<view class="flex">
|
<view>莫甘娜：</view>
|
<view class="flex-sub">如果不能立足于大地，要这双脚又有何用?</view>
|
</view>
|
</view>
|
<view class="margin-top-sm flex justify-between">
|
<view class="text-gray text-df">2018年12月4日</view>
|
<view>
|
<text class="cuIcon-appreciate text-gray"></text>
|
<text class="cuIcon-messagefill text-gray margin-left-sm"></text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<view class="cu-bar bg-white solid-bottom margin-top">
|
<view class="action">
|
<text class="cuIcon-titles text-orange "></text> 文章类卡片
|
</view>
|
<view class="action">
|
<switch :class="isCard?'checked':''" :checked="isCard?true:false" @change="IsCard"></switch>
|
</view>
|
</view>
|
<view class="cu-card article" :class="isCard?'no-card':''">
|
<view class="cu-item shadow">
|
<view class="title"><view class="text-cut">无意者 烈火焚身;以正义的烈火拔出黑暗。我有自己的正义，见证至高的烈火吧。</view></view>
|
<view class="content">
|
<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg"
|
mode="aspectFill"></image>
|
<view class="desc">
|
<view class="text-content"> 折磨生出苦难，苦难又会加剧折磨，凡间这无穷的循环，将有我来终结！真正的恩典因不完整而美丽，因情感而真诚，因脆弱而自由！</view>
|
<view>
|
<view class="cu-tag bg-red light sm round">正义天使</view>
|
<view class="cu-tag bg-green light sm round">史诗</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
isCard: false
|
};
|
},
|
methods: {
|
IsCard(e) {
|
this.isCard = e.detail.value
|
},
|
}
|
}
|
</script>
|
|
<style>
|
|
</style>
|
