Skip to content

Commit 76eaae7

Browse files
higuaifanhiguaifan
committed
💄 [ricePaper] support opacity css var
1 parent 3f0a5b7 commit 76eaae7

2 files changed

Lines changed: 22 additions & 236 deletions

File tree

‎lib/components/template/ricePaper/ricePaper.css‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
1-
:root{
1+
:root {
22
--m-rice-paper-cold: url(../../../public/rice-paper/rice-paper.webp);
33
--m-rice-paper-warm: url(../../../public/rice-paper/rice-paper-warm.webp);
44
--m-rice-paper-light: var(--m-rice-paper-cold);
55
--m-rice-paper-dark: var(--m-rice-paper-warm);
6+
--m-rice-paper-light-opacity: 0.8;
7+
--m-rice-paper-dark-opacity: 0.5;
8+
--m-rice-paper-mountains-opacity:1;
69
}
710

811
.m-rice-paper {
@@ -14,19 +17,19 @@
1417
width: 100%;
1518
}
1619

17-
.m-rice-paper-cold{
20+
.m-rice-paper-cold {
1821
--m-rice-paper-light: var(--m-rice-paper-cold);
1922
--m-rice-paper-dark: var(--m-rice-paper-cold);
2023
}
2124

22-
.m-rice-paper-warm{
25+
.m-rice-paper-warm {
2326
--m-rice-paper-light: var(--m-rice-paper-warm);
2427
--m-rice-paper-dark: var(--m-rice-paper-warm);
2528
}
2629

2730
.m-rice-paper-hover {
2831
background-image: var(--m-rice-paper-light);
29-
opacity: 0.8;
32+
opacity: var(--m-rice-paper-light-opacity);
3033
background-repeat: repeat;
3134
position: absolute;
3235
top: 0;
@@ -50,6 +53,7 @@
5053
aspect-ratio: 4096 / 773;
5154
bottom: 0;
5255
margin-bottom: calc(100% / 4096 * 432);
56+
opacity: var(--m-rice-paper-mountains-opacity);
5357
}
5458

5559
.m-m-reflect {
@@ -145,7 +149,7 @@ html[dark] {
145149

146150
.m-rice-paper-hover {
147151
background-image: var(--m-rice-paper-dark);
148-
opacity: 0.5;
152+
opacity: var(--m-rice-paper-dark-opacity);
149153
}
150154

151155

‎playground/src/Template.vue‎

Lines changed: 13 additions & 231 deletions
Original file line numberDiff line numberDiff line change
@@ -38,226 +38,6 @@
3838
</m-grid>
3939
</m-border>
4040

41-
<div class="cell">
42-
<div class="buttons">
43-
<div class="button">
44-
<m-button @click="subA">-</m-button>
45-
<span>角A：{{ A }}</span>
46-
<m-button @click="addA">+</m-button>
47-
</div>
48-
<div class="button">
49-
<m-button @click="subB">-</m-button>
50-
<span>角B：{{ B }}</span>
51-
<m-button @click="addB">+</m-button>
52-
</div>
53-
<div class="button">
54-
<m-button @click="subC">-</m-button>
55-
<span>角C：{{ C }}</span>
56-
<m-button @click="addC">+</m-button>
57-
</div>
58-
<div class="button">
59-
<m-button @click="subD">-</m-button>
60-
<span>角D：{{ D }}</span>
61-
<m-button @click="addD">+</m-button>
62-
</div>
63-
64-
</div>
65-
66-
<div v-if="true">
67-
<div>
68-
<m-cell :a="-A" :b="B" :c="C" :d="D" :h="100" :w="100">
69-
<img src="../assets/left.png" alt="">
70-
</m-cell>
71-
<m-cell :a="-A" :b="-B" :c="C" :d="D" :h="100" :w="100">
72-
<img src="../assets/left.png" alt="">
73-
</m-cell>
74-
<m-cell :a="-A" :b="-B" :c="-C" :d="D" :h="100" :w="100">
75-
<img src="../assets/left.png" alt="">
76-
</m-cell>
77-
</div>
78-
<div>
79-
<m-cell :a="A" :b="B" :c="C" :d="-D" :h="100" :w="100">
80-
<img src="../assets/left.png" alt="">
81-
</m-cell>
82-
<m-cell :a="-A" :b="B" :c="C" :d="-D" :h="100" :w="100">
83-
<img src="../assets/left.png" alt="">
84-
</m-cell>
85-
<m-cell :a="-A" :b="-B" :c="C" :d="-D" :h="100" :w="100">
86-
<img src="../assets/left.png" alt="">
87-
</m-cell>
88-
</div>
89-
<div>
90-
<m-cell :a="A" :b="-B" :c="C" :d="D" :h="100" :w="100">
91-
<img src="../assets/left.png" alt="">
92-
</m-cell>
93-
<m-cell :a="A" :b="-B" :c="-C" :d="D" :h="100" :w="100">
94-
<img src="../assets/left.png" alt="">
95-
</m-cell>
96-
<m-cell :a="A" :b="-B" :c="-C" :d="-D" :h="100" :w="100">
97-
<img src="../assets/left.png" alt="">
98-
</m-cell>
99-
</div>
100-
<div>
101-
<m-cell :a="A" :b="B" :c="-C" :d="D" :h="100" :w="100">
102-
<img src="../assets/left.png" alt="">
103-
</m-cell>
104-
<m-cell :a="A" :b="B" :c="-C" :d="-D" :h="100" :w="100">
105-
<img src="../assets/left.png" alt="">
106-
</m-cell>
107-
<m-cell :a="-A" :b="B" :c="-C" :d="-D" :h="100" :w="100">
108-
<img src="../assets/left.png" alt="">
109-
</m-cell>
110-
</div>
111-
<div>
112-
<m-cell :a="A" :b="-B" :c="C" :d="-D" :h="100" :w="100">
113-
<img src="../assets/left.png" alt="">
114-
</m-cell>
115-
<m-cell :a="-A" :b="B" :c="-C" :d="D" :h="100" :w="100">
116-
<img src="../assets/left.png" alt="">
117-
</m-cell>
118-
<m-cell :a="-A" :b="-B" :c="-C" :d="-D" :h="100" :w="100">
119-
<img src="../assets/left.png" alt="">
120-
</m-cell>
121-
<m-cell :a="A" :b="B" :c="C" :d="D" :h="100" :w="100">
122-
<img src="../assets/left.png" alt="">
123-
</m-cell>
124-
<m-cell :a="-A" :b="-B" :c="-C" :d="-D" :h="100" :w="100">
125-
<img src="../assets/left.png" alt="">
126-
</m-cell>
127-
<m-cell :a="45" :b="45" :c="45" :d="45" :h="100" :w="100">
128-
<img src="../assets/left.png" alt="">
129-
</m-cell>
130-
</div>
131-
</div>
132-
133-
<m-cell :a="A" :b="B" :c="C" :d="-D" :h="100" :w="100">
134-
<img src="../assets/left.png" alt="">
135-
</m-cell>
136-
137-
</div>
138-
139-
<div class="cell">
140-
<div class="buttons">
141-
<div class="button">
142-
<m-button @click="subA">-</m-button>
143-
<span>角A：{{ A }}</span>
144-
<m-button @click="addA">+</m-button>
145-
</div>
146-
<div class="button">
147-
<m-button @click="subB">-</m-button>
148-
<span>角B：{{ B }}</span>
149-
<m-button @click="addB">+</m-button>
150-
</div>
151-
<div class="button">
152-
<m-button @click="subC">-</m-button>
153-
<span>角C：{{ C }}</span>
154-
<m-button @click="addC">+</m-button>
155-
</div>
156-
<div class="button">
157-
<m-button @click="subD">-</m-button>
158-
<span>角D：{{ D }}</span>
159-
<m-button @click="addD">+</m-button>
160-
</div>
161-
162-
</div>
163-
<div v-if="true">
164-
<div>
165-
<m-cell :a="-A" :b="B" :c="C" :d="D" :h="100" :w="100">
166-
<img src="../assets/left.png" alt="">
167-
</m-cell>
168-
<m-cell :a="-A" :b="-B" :c="C" :d="D" :h="100" :w="100">
169-
<img src="../assets/left.png" alt="">
170-
</m-cell>
171-
<m-cell :a="-A" :b="-B" :c="-C" :d="D" :h="100" :w="100">
172-
<img src="../assets/left.png" alt="">
173-
</m-cell>
174-
</div>
175-
<div>
176-
<m-cell :a="A" :b="B" :c="C" :d="-D" :h="100" :w="100">
177-
<img src="../assets/left.png" alt="">
178-
</m-cell>
179-
<m-cell :a="-A" :b="B" :c="C" :d="-D" :h="100" :w="100">
180-
<img src="../assets/left.png" alt="">
181-
</m-cell>
182-
<m-cell :a="-A" :b="-B" :c="C" :d="-D" :h="100" :w="100">
183-
<img src="../assets/left.png" alt="">
184-
</m-cell>
185-
</div>
186-
<div>
187-
<m-cell :a="A" :b="-B" :c="C" :d="D" :h="100" :w="100">
188-
<img src="../assets/left.png" alt="">
189-
</m-cell>
190-
<m-cell :a="A" :b="-B" :c="-C" :d="D" :h="100" :w="100">
191-
<img src="../assets/left.png" alt="">
192-
</m-cell>
193-
<m-cell :a="A" :b="-B" :c="-C" :d="-D" :h="100" :w="100">
194-
<img src="../assets/left.png" alt="">
195-
</m-cell>
196-
</div>
197-
<div>
198-
<m-cell :a="A" :b="B" :c="-C" :d="D" :h="100" :w="100">
199-
<img src="../assets/left.png" alt="">
200-
</m-cell>
201-
<m-cell :a="A" :b="B" :c="-C" :d="-D" :h="100" :w="100">
202-
<img src="../assets/left.png" alt="">
203-
</m-cell>
204-
<m-cell :a="-A" :b="B" :c="-C" :d="-D" :h="100" :w="100">
205-
<img src="../assets/left.png" alt="">
206-
</m-cell>
207-
</div>
208-
<div>
209-
<m-cell :a="A" :b="-B" :c="C" :d="-D" :h="100" :w="100">
210-
<img src="../assets/left.png" alt="">
211-
</m-cell>
212-
<m-cell :a="-A" :b="B" :c="-C" :d="D" :h="100" :w="100">
213-
<img src="../assets/left.png" alt="">
214-
</m-cell>
215-
<m-cell :a="-A" :b="-B" :c="-C" :d="-D" :h="100" :w="100">
216-
<img src="../assets/left.png" alt="">
217-
</m-cell>
218-
<m-cell :a="A" :b="B" :c="C" :d="D" :h="100" :w="100">
219-
<img src="../assets/left.png" alt="">
220-
</m-cell>
221-
<!-- <m-cell :a="-A" :b="-B" :c="-C" :d="-D" :h="100" :w="100">-->
222-
<!-- <img src="../assets/left.png" alt="">-->
223-
<!-- </m-cell>-->
224-
<!-- <m-cell :a="45" :b="45" :c="45" :d="45" :h="100" :w="100">-->
225-
<!-- <img src="../assets/left.png" alt="">-->
226-
<!-- </m-cell>-->
227-
</div>
228-
<m-cell :a="A" :b="B" :c="C" :d="-D" :h="100" :w="100" v-if="false">
229-
<img src="../assets/left.png" alt="">
230-
</m-cell>
231-
232-
233-
<m-border v-if="false">
234-
<m-grid :gap="20" direction="column" class="screen">
235-
<m-grid :gap="5" :h="245">
236-
<m-cell :w="245">
237-
<img src="../assets/left.png" alt="">
238-
</m-cell>
239-
<m-cell>
240-
<img src="../assets/right.png" alt="">
241-
</m-cell>
242-
</m-grid>
243-
<m-grid :gap="5" :h="162" :gapRotate="[-10, 20]">
244-
<m-cell :w="162">
245-
<img src="../assets/1.png" alt="">
246-
</m-cell>
247-
<m-cell>
248-
<img src="../assets/3.png" alt="">
249-
</m-cell>
250-
<m-cell>
251-
<img src="../assets/2.png" alt="">
252-
</m-cell>
253-
</m-grid>
254-
</m-grid>
255-
</m-border>
256-
</div>
257-
258-
259-
</div>
260-
26141
<div class="width-400">
26242
<m-pagination :total="225" v-model="current"></m-pagination>
26343
</div>
@@ -322,16 +102,18 @@
322102
</div>
323103

324104

325-
<div class="animation">
326-
<m-button @click="toggleVisible">toggleVisible</m-button>
327-
<transition name="m-layout">
328-
<div class="filter-div" v-if="riceVisibleRef">
329-
<m-rice-paper>
330-
<div class="inside-div"/>
331-
</m-rice-paper>
332-
</div>
333-
</transition>
334-
</div>
105+
<div class="animation">
106+
<m-button @click="toggleVisible">toggleVisible</m-button>
107+
<transition name="m-layout">
108+
<div class="filter-div" v-if="riceVisibleRef">
109+
<m-rice-paper :style="{
110+
'--m-rice-paper-mountains-opacity':0.2
111+
}">
112+
<div class="inside-div"/>
113+
</m-rice-paper>
114+
</div>
115+
</transition>
116+
</div>
335117

336118

337119
<!-- <Layout/>-->
@@ -621,7 +403,7 @@ img {
621403
border-radius: 50%;
622404
}
623405
624-
.animation{
406+
.animation {
625407
height: 500px;
626408
width: 500px;
627409
}

0 commit comments

Comments
 (0)