1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
| <template name="components">
| <view>
| <scroll-view scroll-y class="page">
| <cu-custom bgImage="https://image.weilanwl.com/color2.0/plugin/cjkz2329.jpg">
| <block slot="content">
| <image src="/static/cjkz.png" mode="aspectFill" style="width: 240upx;height: 60upx;"></image>
| </block>
| </cu-custom>
| <view class="cu-card">
| <view class="cu-item bg-img shadow-blur" :style="[{backgroundImage:'url('+item.img+')'}]" @tap="toChild" :data-url="item.url"
| v-for="(item,index) in list" :key="index">
| <view class="cardTitle">
| {{item.title}}
| </view>
| </view>
| </view>
| <view class="cu-tabbar-height"></view>
| </scroll-view>
| </view>
| </template>
|
| <script>
| export default {
| name: "components",
| data() {
| return {
| StatusBar: this.StatusBar,
| CustomBar: this.CustomBar,
| list: [{
| title: '索引列表',
| img: 'https://image.weilanwl.com/color2.0/plugin/sylb2244.jpg',
| url: '../plugin/indexes'
| },
| {
| title: '微动画',
| img: 'https://image.weilanwl.com/color2.0/plugin/wdh2236.jpg',
| url: '../plugin/animation'
| },
| {
| title: '全屏抽屉',
| img: 'https://image.weilanwl.com/color2.0/plugin/qpct2148.jpg',
| url: '../plugin/drawer'
| },
| {
| title: '垂直导航',
| img: 'https://image.weilanwl.com/color2.0/plugin/qpczdh2307.jpg',
| url: '../plugin/verticalnav'
| }
| ]
| };
| },
| methods: {
| toChild(e) {
| uni.navigateTo({
| url: e.currentTarget.dataset.url
| })
| },
| },
| }
| </script>
|
| <style>
| .page {
| height: 100vh;
| }
|
| .cardTitle {
| color: #fff;
| padding: 90upx 60upx;
| font-size: 40upx;
| font-weight: 300;
| transform: skew(-10deg, 0deg);
| position: relative;
| text-shadow: 0px 0px 6upx rgba(0, 0, 0, 0.3)
| }
|
| .cardTitle::before {
| content: "";
| position: absolute;
| width: 60upx;
| height: 6upx;
| border-radius: 20upx;
| background-color: #fff;
| display: block;
| top: 60upx;
| left: 50upx;
| transform: skew(10deg, 0deg);
| }
|
| .cardTitle::after {
| content: "";
| position: absolute;
| width: 140upx;
| border-radius: 6upx;
| height: 24upx;
| background-color: #fff;
| display: block;
| bottom: 76upx;
| left: 90upx;
| transform: skew(10deg, 0deg);
| opacity: 0.1;
| }
| </style>
|
|
