Skip to content

Commit 6be6f83

Browse files
author
innie
committed
1224-2 更新網頁和Ｐ圖
1 parent e3d010d commit 6be6f83

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+1798
-86
lines changed

‎css/custom.css

+43-23
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ div.controller-R{
6767
}
6868

6969
/*按鈕設定*/
70-
.controller a{
70+
.controller div{
7171
width: 60px;
7272
height: 60px;
7373
display: block;
@@ -84,17 +84,17 @@ div.controller-R{
8484
}
8585

8686
/*hover按鈕*/
87-
.controller-L a.con_prev:hover{
87+
.controller-L div.con_prev:hover{
8888
left: -10px;
8989
}
90-
.controller-R a.con_next:hover{
90+
.controller-R div.con_next:hover{
9191
right: -10px;
9292
}
93-
.controller-L a.con_prev:hover i, .controller-R a.con_next:hover i{
93+
.controller-L div.con_prev:hover i, .controller-R div.con_next:hover i{
9494
color: #FFBAB1;
9595
}
9696
/*最後一個步驟要加入購物車時換icon*/
97-
.controller-R a.con_next img, .controller-R a.con_next:hover img{
97+
.controller-R div.con_next img, .controller-R div.con_next:hover img{
9898
width: 100%;
9999
}
100100

@@ -140,6 +140,10 @@ div.cus_navbar{
140140
left: 0;
141141
}
142142

143+
/*小樹亮燈*/
144+
.cus_navbar ul li .light_image.bling{
145+
background-position:0% 100%;
146+
}
143147

144148
/*文字區塊*/
145149
.cus_navbar ul li .light_text{
@@ -467,7 +471,7 @@ div.cus_slideshow{
467471
}
468472

469473

470-
/*選擇動物------------待圖好了以後再來調整*/
474+
/*選擇動物底板----------*/
471475
.cus_slideshow ul li .step .case_animal{
472476
width: 78%;
473477
height: 260px;
@@ -545,112 +549,112 @@ div.cus_slideshow{
545549

546550
/*每個icons的sprite位置*/
547551
.animalicon01_owl{
548-
background: url(../images/product/animal_icons.svg) no-repeat 0 0;
552+
background: url(../images/product/animal_icons.svg) 0 0;
549553
}
550554
.productclass_secondnav div div.animalicon01_owl:after{
551555
content: "貓頭鷹";
552556
}
553557

554558
.animalicon02_fox{
555-
background: url(../images/product/animal_icons.svg) no-repeat -50px 0;
559+
background: url(../images/product/animal_icons.svg) -100% 0;
556560
}
557561
.productclass_secondnav div div.animalicon02_fox:after{
558562
content: "狐狸";
559563
}
560564

561565
.animalicon03_rabbit{
562-
background: url(../images/product/animal_icons.svg) no-repeat -100px 0;
566+
background: url(../images/product/animal_icons.svg) -200% 0;
563567
}
564568
.productclass_secondnav div div.animalicon03_rabbit:after{
565569
content: "兔子";
566570
}
567571

568572
.animalicon04_lion{
569-
background: url(../images/product/animal_icons.svg) no-repeat -150px 0;
573+
background: url(../images/product/animal_icons.svg) -300% 0;
570574
}
571575
.productclass_secondnav div div.animalicon04_lion:after{
572576
content: "獅子";
573577
}
574578

575579
.animalicon05_deer{
576-
background: url(../images/product/animal_icons.svg) no-repeat -200px 0;
580+
background: url(../images/product/animal_icons.svg) -400% 0;
577581
}
578582
.productclass_secondnav div div.animalicon05_deer:after{
579583
content: "鹿";
580584
}
581585

582586
.animalicon06_eagle{
583-
background: url(../images/product/animal_icons.svg) no-repeat -250px 0;
587+
background: url(../images/product/animal_icons.svg) -500% 0;
584588
}
585589
.productclass_secondnav div div.animalicon06_eagle:after{
586590
content: "老鷹";
587591
}
588592

589593
.animalicon07_cat{
590-
background: url(../images/product/animal_icons.svg) no-repeat -300px 0;
594+
background: url(../images/product/animal_icons.svg) -600% 0;
591595
}
592596
.productclass_secondnav div div.animalicon07_cat:after{
593597
content: "貓咪";
594598
}
595599

596600
.animalicon08_bird{
597-
background: url(../images/product/animal_icons.svg) no-repeat -350px 0;
601+
background: url(../images/product/animal_icons.svg) -700% 0;
598602
}
599603
.productclass_secondnav div div.animalicon08_bird:after{
600604
content: "鳥兒";
601605
}
602606

603607
.animalicon09_wolf{
604-
background: url(../images/product/animal_icons.svg) no-repeat 0 -50px;
608+
background: url(../images/product/animal_icons.svg) 0 -100%;
605609
}
606610
.productclass_secondnav div div.animalicon09_wolf:after{
607611
content: "狼";
608612
}
609613

610614
.animalicon10_monkey{
611-
background: url(../images/product/animal_icons.svg) no-repeat -50px -50px;
615+
background: url(../images/product/animal_icons.svg) -100% -100%;
612616
}
613617
.productclass_secondnav div div.animalicon10_monkey:after{
614618
content: "猴子";
615619
}
616620

617621
.animalicon11_bee{
618-
background: url(../images/product/animal_icons.svg) no-repeat -100px -50px;
622+
background: url(../images/product/animal_icons.svg) -200% -100%;
619623
}
620624
.productclass_secondnav div div.animalicon11_bee:after{
621625
content: "蜜蜂";
622626
}
623627

624628
.animalicon12_squirrel{
625-
background: url(../images/product/animal_icons.svg) no-repeat -150px -50px;
629+
background: url(../images/product/animal_icons.svg) -300% -100%;
626630
}
627631
.productclass_secondnav div div.animalicon12_squirrel:after{
628632
content: "松鼠";
629633
}
630634

631635
.animalicon13_dog{
632-
background: url(../images/product/animal_icons.svg) no-repeat -200px -50px;
636+
background: url(../images/product/animal_icons.svg) -400% -100%;
633637
}
634638
.productclass_secondnav div div.animalicon13_dog:after{
635639
content: "狗";
636640
}
637641

638642
.animalicon14_porcupine{
639-
background: url(../images/product/animal_icons.svg) no-repeat -250px -50px;
643+
background: url(../images/product/animal_icons.svg) -500% -100%;
640644
}
641645
.productclass_secondnav div div.animalicon14_porcupine:after{
642646
content: "刺蝟";
643647
}
644648

645649
.animalicon15_parrot{
646-
background: url(../images/product/animal_icons.svg) no-repeat -300px -50px;
650+
background: url(../images/product/animal_icons.svg) -600% -100%;
647651
}
648652
.productclass_secondnav div div.animalicon15_parrot:after{
649653
content: "鸚鵡";
650654
}
651655

652656
.animalicon16_elephant{
653-
background: url(../images/product/animal_icons.svg) no-repeat -350px -50px;
657+
background: url(../images/product/animal_icons.svg) -700% -100%;
654658
}
655659
.productclass_secondnav div div.animalicon16_elephant:after{
656660
content: "象";
@@ -1252,6 +1256,12 @@ div.cus_navbar{
12521256
/*-------------幻燈片02------------*/
12531257

12541258

1259+
/*icons*/
1260+
.productclass_secondnav div div{
1261+
width: 40px;
1262+
height: 40px;
1263+
margin: 2.5% 2%;
1264+
}
12551265

12561266

12571267

@@ -1322,7 +1332,7 @@ div.controller-R{
13221332
right:-40px;
13231333
}
13241334
/*按鈕設定*/
1325-
.controller a{
1335+
.controller div{
13261336
width: 20px;
13271337
height: 20px;
13281338
position: relative;
@@ -1479,6 +1489,16 @@ div.cus_slideshow{
14791489
/*----------幻燈片02------------*/
14801490

14811491

1492+
/*icons*/
1493+
.productclass_secondnav div div{
1494+
width: 40px;
1495+
height: 40px;
1496+
margin: 2.5% 1%;
1497+
}
1498+
1499+
1500+
1501+
14821502

14831503

14841504
/*----------幻燈片03------------*/

‎css/inspire.css

+26-5
Original file line numberDiff line numberDiff line change
@@ -69,10 +69,16 @@ content{
6969
top: 0;
7070
bottom: 0;
7171
left: 0;
72-
right: -200%; /*先藏在外面，可調0回來*/
72+
right: 0%; /*先藏在外面，可調0回來*/
7373
width: 96%;
7474
min-height: 590px;
7575
font-size: 0;
76+
transition: 1s;
77+
}
78+
79+
/*點墼守護精靈，從右邊出場*/
80+
.inspire.come{
81+
right:-200%;
7682
}
7783

7884
/*底板範圍*/
@@ -217,11 +223,18 @@ content{
217223
margin: auto;
218224
top: 0;
219225
bottom: 0;
220-
left: 0%;
221-
right: 0%; /*消失控制鈕*/
226+
left: -200%; /*消失控制鈕*/
227+
right: 0%;
222228
width: 96%;
223229
min-height: 590px;
230+
transition: 1s;
231+
}
232+
233+
/*心測開場出來*/
234+
.findAnimal.come{
235+
left: 0;
224236
}
237+
225238
/*底板範圍*/
226239
.bg{
227240
width: 100%;
@@ -339,7 +352,7 @@ content{
339352
height: 85px;
340353
position: absolute;
341354
top:250px;
342-
left: 710px;
355+
left: 70%;
343356
opacity: 0;
344357
transition: .3s;
345358

@@ -833,7 +846,15 @@ content{
833846
right: 2%;
834847
}
835848

836-
849+
/*右邊說話的底板*/
850+
.talk{
851+
width: 140px;
852+
height: 50px;
853+
top:265px;
854+
left: 75%;
855+
opacity: 1;
856+
transition: .3s;
857+
}
837858

838859

839860

‎custom.html

+18-16
Original file line numberDiff line numberDiff line change
@@ -79,10 +79,10 @@
7979
<a href="product.html"></a>
8080
</li>
8181
<li class="icon_custom here">
82-
<a href=""></a>
82+
<a href="custom.html"></a>
8383
</li>
8484
<li class="icon_inspire">
85-
<a href=""></a>
85+
<a href="inspire.html"></a>
8686
</li>
8787
</ul>
8888
</nav>
@@ -103,7 +103,8 @@
103103

104104
<div class="custom">
105105
<div class="controller controller-L">
106-
<a href="javasript:;" class="con_prev"><i class="fa fa-chevron-circle-left" aria-hidden="true"></i></a>
106+
<div class="con_prev"><i class="fa fa-chevron-circle-left" aria-hidden="true"></i></div>
107+
<!-- <a href="javasript:;" class="con_prev"></a> -->
107108
</div>
108109
<div class="cus_navbar">
109110
<ul >
@@ -157,9 +158,9 @@
157158
<a href="javascript:;" class="wooden" data-wood="04-rose-wood"><img src="images/product/classic-icon/04-rose-wood.png" alt="" ></a>
158159
<a href="javascript:;" class="wooden" data-wood="05-walnut-wood"><img src="images/product/classic-icon/05-walnut-wood.png" alt="" ></a>
159160
</div>
160-
<div class="price">
161+
<div class="price" data-paid="0">
161162
<p>目前價格</p>
162-
<p>NT$800</p>
163+
<p>NT$<span>800</span></p>
163164
</div>
164165
<div class="save">
165166
<a href="javascript:;" class="ok_buy">確定</a>
@@ -216,9 +217,9 @@
216217

217218
</div>
218219
</div>
219-
<div class="price">
220+
<div class="price" data-paid="100">
220221
<p>目前價格</p>
221-
<p>NT$800</p>
222+
<p>NT$<span>800</span></p>
222223
</div>
223224
<div class="save">
224225
<a href="javascript:;" class="skip">SKIP</a>
@@ -243,7 +244,7 @@
243244
<div class="motto">
244245
<p>打造座右銘</p>
245246
<div class="add_to_buy">
246-
<img src="images/custom/add_price_icon.svg" alt=""><p>加購價 30元</p>
247+
<img src="images/custom/add_price_icon.svg" alt=""><p>加購價 100元</p>
247248
</div>
248249
<div class="control_bar">
249250
<div class="add_text">
@@ -288,9 +289,9 @@
288289
</div>
289290
</div>
290291
</div>
291-
<div class="price">
292+
<div class="price" data-paid="100">
292293
<p>目前價格</p>
293-
<p>NT$900</p>
294+
<p>NT$<span>800</span></p>
294295
</div>
295296
<div class="save">
296297
<a href="javascript:;" class="skip">SKIP</a>
@@ -324,9 +325,9 @@
324325
<label for="msg">想說些什麼話<span>（上限100字)</span></label>
325326
<textarea class="msg_text" id="msg" name="msg" maxlength="100" wrap="hard"></textarea>
326327
</div>
327-
<div class="price">
328+
<div class="price" data-paid="30">
328329
<p>目前價格</p>
329-
<p>NT$1000</p>
330+
<p>NT$<span>800</span></p>
330331
</div>
331332
<div class="save">
332333
<a href="javascript:;" class="skip">SKIP</a>
@@ -344,17 +345,17 @@
344345
</div>
345346
<div class="box">
346347
<p>外盒款式</p>
347-
<div class="add_to_buy">
348+
<div class="add_to_buy" data-paid="30">
348349
<img src="images/custom/add_price_icon.svg" alt=""><p>&nbsp;&nbsp;加購價 30元</p>
349350
</div>
350351
<a href="javascript:;" class="box_img" data-gift="giftbox01">
351352
</a>
352353
<a href="javascript:;" class="box_img2" data-gift="giftbox02">
353354
</a>
354355
</div>
355-
<div class="price">
356+
<div class="price" data-paid="30">
356357
<p>目前價格</p>
357-
<p>NT$1030</p>
358+
<p>NT$<span>800</span></p>
358359
</div>
359360
<div class="save">
360361
<button type="submit" class="skip">SKIP</button>
@@ -365,7 +366,8 @@
365366
</ul>
366367
</div>
367368
<div class="controller controller-R">
368-
<a href="javasript:;" class="con_next"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a>
369+
<div class="con_next"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i></div>
370+
<!-- <a href="javasript:;" class="con_next"></a> -->
369371
</div>
370372
</div>
371373

0 commit comments

Comments
 (0)