---
# System prepended metadata

title: 專題主題發想

---

# 專題主題發想

fashion(時裝設計)
---
- https://www.fashion.net/
---
oland-outdoorliving(戶外用品)
---
- https://oland-outdoorliving.co.jp/
---
堂島捲Mon cher (蛋糕店)
---
- http://www.mon-cher.com/
---
安永 EY (會計師事務所)
---
- https://www.ey.com/en_tw
---
MIYAVI 石原崇雅(個人形象網站)
---
- http://myv382tokyo.com/
---
SEKAI NO OWARI 世界末日(個人形象網站)
---
- https://endoftheworld.jp/
---
vakel&udatsu(室內設計)++
---
- https://vakel.studio/ 
- https://udatsu.co.jp/ 
---
arozjewelry(珠寶)++
---
- https://arozjewelry.com/en/ 
---
benz(車商)
---
- https://www.mercedes-benz.jp/special/cla/
---
loop(耳機)
---
- https://loopearplugs.jp/
---
LSCM(音樂版權商)
---
- http://www.littstar.co.jp/
---
corona(酒商) ++
---
- https://corona.de/ 
---
丸龜製麵(連鎖餐飲)
---
- https://www.marugame-seimen.com/
---
國家地理雜誌(雜誌)
---
- https://www.natgeomedia.com/
---


# ---------------------------------------------------



飲品
---
- https://www.wildsouls.gr/en
---
魚罐頭品牌
---
- https://antara.studio/work/
- https://vooban.com/
- https://www.pinterest.com/pin/20829217014825353/
---
家居設計/燈具 ++ ++
---
- https://don-barber.gr/ 
- https://www.anti-waste.com/
- https://bridge303.qodeinteractive.com/
- https://r2-r.tumblr.com/
- https://www.thc-living.com/wall/mantis-bs5
---
保養品 ++
---
- https://bridge373.qodeinteractive.com/ 
- https://www.rudolphcare.com/ 
- http://www.wayfarerdesignstudio.com/ 
---
油漆
---
- https://www.rainbow-house.com.tw/
- https://www.dulux.com.tw/zh
---
室內設計建材/板材
---
- https://kaiwatoorder.com/
- https://savilerowprojects.com/products/
---
辦公用品
---
- https://tojiro.net/
---
日式糕點
---
- https://moshi.com/tw/category/audio/headphones-and-earphones/
---
西式餐廳
---
- https://mexicanrestaurant.webflow.io/
---
精品店 ++
---
- https://aebeleinteriors.com/ 
---



家居設計/燈具 ++

版型參考
https://www.anti-waste.com/
https://kaiwatoorder.com/


素材
https://www.dwr.com/home-office?lang=en_US
https://www.thc-living.com/
https://burrow.com/
https://www.gubi.com/?_ga=2.101583494.684463871.1625468654-1313488990.1625468654
https://www.boconcept.com/en-us/?rb=true


前：
·關於我們（品牌介紹）
·產品資訊（購物）
·購物車
·聯絡我們


後：
·首頁編輯
·會員
·內文
·商品圖片
·商品內文


專題題目：家居品牌

專題名單：楊堃灝,蘇韻宇(共2人)

分工：
A(前端/後端/視覺設計) 
B(前端/後端/系統設計)

------
風格

版型
http://www.wayfarerdesignstudio.com/

精品店
- https://aebeleinteriors.com/ 
照片擺放方式

![](https://i.imgur.com/F4EAFHu.png)


[討論主題]：質感家居設計品牌
內容：
桌子、椅子、沙發、燈具、配件
沙發、收納櫃/架、桌子、椅子、配件（燈、抱枕...）

需要修圖：案例、（首頁、品牌有用到的）、椅子


[系統架構]：麵包屑、網站地圖(footer)
首頁-最新資訊、社群連結(IG、FB)
品牌介紹-
產品頁面-
聯絡我們-含門市資訊、地圖


購物車
會員登入

<!-- 首頁內容版型再決定 -->


[風格設計]
目標：質感清新小高級

[資料庫設計]
[統一格式]
[分配任務]
[程式撰寫]

![](https://i.imgur.com/SxUSmcw.png)
![](https://i.imgur.com/LF5Ly1b.png)
![](https://i.imgur.com/Lv5tgPC.png)


離邊56px
導覽列高度72px
內文14px





精選商品版型參考
![](https://i.imgur.com/wO02EPP.png)


精選案例版型參考
![](https://i.imgur.com/vuBoOAg.jpg)


版型參考
![](https://i.imgur.com/qxYnMg7.jpg)

![](https://i.imgur.com/ixcV3Hn.png)

![](https://i.imgur.com/1pcnp7h.png)

![](https://i.imgur.com/SMWgGnJ.png)

![](https://i.imgur.com/vhoyewY.jpg)

![](https://i.imgur.com/s1aQIU0.png)

![](https://i.imgur.com/t8NIKdv.png)

![](https://i.imgur.com/fiStezr.png)


代辦事項
~~header 複製貼上全部~~
~~要統一按鈕哇~~
~~訂單編號 unsigned zerofill~~
~~信用卡哇哇哇~~
字體統一 
地址



素材
https://www.ariashop.co.uk/collections/table-lights/products/ic-table-lamp-t1-high
https://www.ny-k.co.jp/three_piece/eterno_legno_orezzia/
https://shop.globe-antiques.com/
https://www.nissin-mokkou.co.jp/products/%e3%83%80%e3%82%a4%e3%83%8b%e3%83%b3%e3%82%b0%e3%83%81%e3%82%a7%e3%82%a2-w0063
https://resident.co.nz/catalogue
https://zumtobel.us/all-products/mount=recessed/
https://www.flannelsofa.com/shop/fiore.php?size=3
https://www.justicefurniture.com/furniture/chairs
https://www.lloyds.co.jp/
http://www.jinkuramoto.com/
https://www.karimoku-newstandard.jp/cn/products/
https://shiodakagu.com/product-cat/sofa
https://livingedge.com.au/
https://www.boconcept.com/en-us/?rb=true
https://www.gagu.life/index.php
https://gubi.presscloud.com/digitalshowroom/#/images



# 完成事項
完成ER-Model
完成表格敘述
完成wireframe 
尋找圖片素材 
命名統一
環境設定php 
開始切版  

# 時程規劃
開XD  介紹

目前先切完網頁
功能 動畫有時間在做
媒合會以靜態網頁展示



# 0716報告

[目標對象]
顧客是想要讓生活環境有美好感受的族群

[網站目的]
網站希望達到的目標是，透過品牌形象網站的建立，
吸引到對生活品質有要求的顧客，
在提供質感商品的同時，也提供家居佈置的idea。

[風格設計]
目標：質感溫度

功能架構圖
LOGO設計、色調
useCase
流程圖
ER-Model
表格敘述
檔案命名統一
版面設計 畫wireFrame
切版


# 8/19嗨
- [x] 1.前台後台分工
- [x] 2.圖片整理
- [x] 3.建立假資料

![](https://i.imgur.com/VvgCAnN.jpg)



# 瑞貝卡的筆記8/25 
-圖片更新：common新增、G_others更新
-header的.ico[暫時解決(body再引入資料庫連線檔)]
-資料庫連線檔案[A:php有用到再用]
-位置session_start()[加在每頁php]
-位置、連結相對位置[以引入的為主]
-註冊登入登出修改流程跳頁問題[路徑錯了]
[資料庫require_once;header用include_once]

-下次討論：9/2 下午

-訂單查詢。
-登入從哪登入。
-header會員中心連結改成會員中心上面判斷有無登入。
-會員中心-訂單增加寄送地址欄位。
-重設密碼要增加update。
-忘記密碼、重設密碼判斷正不正確。

# 資料庫圖片-商品分類-圖片順序有修改過
![](https://i.imgur.com/QZGZHIV.png)
上面這行是之前失敗的斜體字可以刪掉


# 瑞貝卡的筆記9/2後
-搜尋資料傳送(原價特價一起排序)。
-登入登出轉址判斷。
~~哎呀忘記判斷會員中心超過多少更改卡片圖片~~
~~-記得檢查改所有連結、alt、首頁關於svg正名、~~

~~-input排除空白鍵。~~

    ->用js判斷兩個input值一不一樣，如不一樣不給按並跳出警告文字
      (鍵盤有輸入值的事件＆有無空值)(resetPw、register)

# 成為勇者之後
-會員中心-訂單資訊。（訂單下空白）。
-搜尋資料傳送(搜尋類別一起撈)。
-搜尋欄只輸入空白鍵不給搜尋。

# 0918
~~註冊、忘記密碼、重設密碼、會員資料更新成功是否與加入購物車同畫面~~
~~重設密碼後是否要再重新登入一次~~
~~搜尋沙發 餐桌~~

~~訂單查詢順序？~~
-搜尋資料傳送(條件排序ajax)。（改後面兩個按鈕值測試）。
-登入時增加商品頁面的判斷。
-登入、忘記密碼、頁面驗證失敗不跳頁。(all改跳小字)。
-忘記密碼：寄送驗證信件置信箱、改新變數並重新登入、3秒後blahblah。
-註冊頁面判斷 如果有登入直接到會員中心。
-生日日期判斷有沒有大於今天日期。

-下次討論：9/20 


# 0920
-header購物車icon(購物車svg路徑改圖片＋紅點)[這邊目前還是路徑只是加一顆紅點點（為了hover顏色）]。
 
      function fn1() {
        const dot = document.getElementsByClassName("shoppingCart-dot");
        Array.prototype.forEach.call(dot, function (a) {
          a.innerHTML = '<circle cx="21.6" cy="2.4" r="2.4"/>';
        });
      }
      fn1();

 
-價格要加逗號。
-會員中心下單資格(訂單查詢若是金卡會員增加折扣價格欄)。
    
    能不能訂單金額跟折扣後金額直接分兩個欄位啊ＸＤ
    （直接用力除回去）(這裡改成用撈的)


-註冊、重設密碼、會員資料更新。(統一跳小字，不要用alert)。 

-下次討論：~~9/22 ~~改9/23下午

# 0923

-input手機號碼判斷maxlength。
-會員中心更新後性別。
-漢堡選單。

       
      我是燈箱的檔案 https://drive.google.com/file/d/1LDZUdpGiLTcgdL43UB7bm2G45zfg6QHY/view?usp=sharing

![](https://i.imgur.com/gsjx2aa.png)



-下次討論：9/26 那天看看（25晚確認）

# 0926

-搜尋欄漢堡。
-首頁輪播。
-G_others。
-resize動畫。

-下次討論：9/27 晚

    雲端資料夾整合
    丟上伺服器

# 0927

-購物須知（第一個三角形）。
-首頁banner高（品牌故事一併更新）。
-首頁loadind。
-會員中心最上面判斷。
-資料庫修改：床邊櫃、性別數字交換。

重新上傳：購物須知、首頁、品牌故事、會員中心。

-下次討論：9/28 下午2:00
    
    找10個版型

-下次討論：9/29 傍晚確認進度 


# 0930
~~未登入狀態商品頁面按加入購物車直接加入（但抓下本機正常）~~
購物車頁面刪除所有商品，icon dot還在

未登入狀態從商品頁面點擊購物車icon->回到商品頁面（購物車）。
會員中心取消訂單->更改狀態，累積消費扣掉。

~~購物車空的也可以結帳~~


# 1004
-會員中心-取消訂單不改累積消費。
-按人頭icon登入一律去會員中心。
-calendar.svg(register、memberArea)(雲端、伺服器img)。
-新增訂單要改狀態-前台預設已送達。

-下次討論：10/6


# I_icon 新增：
contact_button.svg、indexAbout_searchIcon.svg
-瑞貝卡要記得抓新的產品圖資料包


# 1008
1.引入js、css、php、fn(0);
2.標題、search樣式
3.傳檔案
4.search功能
5.修改一點點

-提示字預設最小高度(all)
-後台登入提示字css
-1004修改檔案要上傳
![](https://i.imgur.com/v98IVHG.png)
![](https://i.imgur.com/jicU8fX.png)
![](https://i.imgur.com/0qfzpvA.png)
![](https://i.imgur.com/v02RqH3.png)


-下次討論：10/10


# 待修改：
-資料流程圖
-ERmodel增加購物車
-前台wireframe


adminState
loginAdmin

#545F6A 主色
#F7F7F7 底色

![](https://i.imgur.com/ErJxtJg.png)

    .form-control::placeholder {
        color: #545f6a63;
    }

![](https://i.imgur.com/7NL8qxk.png)
![](https://i.imgur.com/bumuR3e.png)

待討論
css順序
orderBy
欄位名稱p
訂單詳細
font-color


# 1014
css順序（對照HTML）
記得關掉奇怪的東Ｃ
orderBy箭頭icon不可以點
![](https://i.imgur.com/aCaD76w.png)
    
        設定min-height
            
兩個字：
名&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp稱:
三個字：
子&nbsp&nbsp&nbsp類&nbsp&nbsp&nbsp別:
四個字：
商&nbsp品&nbsp名&nbsp稱:


下次討論：10/18 前一天約時間
-分頁


# 10/19
-me-1拿掉。
-所有<span>:</span>要統一（案例編輯除外）。

-會員帳號格式判斷（<font color='#f00'>**前台註冊同步，尚未上傳**</font>）。
-案例編輯預覽圖片（1200尺寸）。

-1234;1...345...;蝦皮or屈臣氏(先改productList的)


![](https://i.imgur.com/8nEEj0D.png)

下次討論：10/22 晚上


1.最小高度?
2.【訂單查詢】
3.autoComplete(<font color='#f00'>**transparent won't work ! !**</font>) ↓
```css=
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    box-shadow: 0 0 0 30px #f7f7f7 inset !important;
    transition: 0s;
}
```


最小高度是指j個嗎？ <font color="#f00">**4**</font>
![](https://i.imgur.com/DFupJRX.png)

    .list-group:first-child {
        height: 24.2px;
    }
    
    
    
    
# h1 10/22
已送達->已完成。
-
-555@555（<font color='#f00'>**前台註冊js同步，尚未上傳**</font>）。
-input bg-color。（<font color='#f00'>**前台登入css同步，尚未上傳**</font>）。
-頁數檔案＋排序。
-btn focus、check checked/focus->box-shadow。
檔案加總大小（送出後若不行再跳）


哇～我有黃色的線椰喔椰～

下次討論：10/25 光復節快樂
哈哈哈哈哈歐耶～ ＸＤＤ


```php=
if(isset($_GET['orderBy'])){
    $abc = $_GET['orderBy'];
}else{
    $abc = 0;
}
if($abc==0){echo " iconShow";}
```


# 10/25
-改燈箱

下次討論：11/2 下午


# 11/2

後台ok<font color='#f00'>**前台ok，尚未上傳**</font>：
-商品資訊、名稱、價格、優惠價格上限(max-legnth)（所有輸入欄位）（商品庫存<=99999...等）。
-input判斷數字(先轉數值keyup）

    https://www.itread01.com/content/1550561595.html。

-------
-商品名稱改可輸入空白。
-商品編輯 案例編輯案例圖片尺寸設定。
-優惠價小於商品價格判斷。
-優惠商品、價格上傳及清除。
-搜尋。


-[？？]資料表會員手機長度？
-[？？]取消優惠商品（圖片？
-[上次忘記說]檔案ajax我用下面這個
    
    https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects


-上傳暫存路徑

下次討論：11/5 晚上


# 11/2
-手機input(備註格式09開頭)(前台註冊/後台會員新增)。
-搜尋。
-取消優惠商品圖片一併刪除（php 刪除檔案）（刪除開測試資料夾側！）。
-商品編輯上傳圖片src改先清空再印一次img（暫存路徑心存變數->預覽圖片印暫存路徑檔案）[用另一個方法：?Math.random()]。

    <img src="url_goes_here?Math.random()" />


下次討論：11/8 晚上

# 11/8
-警告提示字不加句號。
-紅色(色碼：#ff2914)。
-商品價格判斷。

-搜尋$stmt->store_result();

-phpinfo();

下次討論：11/10 下午


# 11/10
-後台search。
-前台首頁＆故事背景圖。

    step1 先壓圖片（連手機網路看）
    if not ok 
    step2 先塞小圖js預載完大圖再換
    keyword:preload image js/預載圖片 js
    
    
下次討論：11/12 國父誕辰紀念日快樂 下午

# 11/12
-配件banner。
-圖片壓縮-上傳。
-banner 輪播（＋聯絡我們。
-會員中心取消訂單（庫存量加回去、訂單狀態改3(orderlist_update(else)。

-偵測動畫
![](https://i.imgur.com/UplvsDY.png)
    
    https://cssanimation.rocks/scroll-animations/
    

-視差滾動

    https://www.youtube.com/watch?v=hJTNCR75vc0
    
    
    
補充：
![](https://i.imgur.com/UBWJg3A.png)


    1.getBoundingClientRect();
    https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

    2. JavaScript 獲取頁面高度(簡易版)
    https://dotblogs.com.tw/aquarius6913/2011/01/03/20538
    
    3.取得DOM元素的寬度或高度屬性差別（中文）
    https://shubo.io/element-size-scrolling/
    
    4.同上（英文）
    https://javascript.info/size-and-scroll#don-t-take-width-height-from-css


下次討論：11/15 晚上


# 11/15
-品牌故事第一段內容。
-圖片區H_class->原尺寸改jpg。
-超過1MB特別縮小。
-取消訂單要加確認視窗。
-購物須知動畫。
-手機尺寸調整：

    品牌故事漢堡選單。
    聯絡我們。
    會員中心訂單價格。
    搜尋結果價格。
    會員中心等級説明
    首頁小banner
    
    商品類別-銷後排行箭頭
    商品頁面“庫存”
    
    (跑版地方m/p重設設定)



-所有商品(圖片位置)。
-圖片區H_class 改jpg ＸＤ哈哈 嘿嘿 喵喵。
-所有商品 class高度。





# 11/18 晚上 嗨～～
^_<  o_O
-確認取消鼠標。
-購物須知-內容打開delay久一點點點\淡出速度加快（淡出拿掉）。
-購物須知+手風琴最小高度100vh-（header+麵包屑）。
-品牌故事麵包屑#9a7060。
-首頁＆品牌故事搜尋功能＋放大鏡位置。
-class桌子banner。
-會員中心訂單查詢


-手機尺寸調整：

    會員中心等級説明。
    首頁品牌故事漏白。
    會員中心-手風琴icon
    會員中心訂單查詢-地址顏色
    
    
    

    
    
    

所有商品-銷售排行箭頭
```
.soldArrows{
    /* min-width:60px */;
    display:flex;
}
```
商品類別-銷後排行箭頭

```
.newProduct-arrows{
    display:flex;
}
```

商品頁面-數量加減
```
.addSup{
    /* min-width: 104px; */
    display:flex;
}
```
商品頁面-庫存
![](https://i.imgur.com/ybm3oDF.png)
對productDetail-stock標籤作用沒用
可能要針對庫存兩個字




-庫存 +- (內頁
-標題遮罩 (所有商品
-檢查圖片(模糊?
-商品詳細&規格
-左右箭頭(+最小高度看看?

# 11/22 下午（你是天使 你是我最粗和最後的天堂

-會員中心訂單查詢-價格。
-麵包屑首頁連結。

-<h1234>。
-會員中心-小計顏色。
-轉檔跑色。
-resetPW。
-ipad（之後直接借一台air來看）
-手機尺寸調整：
    
    會員中心訂單查詢-地址顏色(6s+、7+、ipadair通通ok)。
        (-->只有6s+當地址亂打只輸入數字被判讀成可撥打電話才會跑色)
    會員中心-手風琴icon(6s+、7+、ipadair通通跑)
    會員中心【xx會員】(6s+已改沒跑、7+已改沒跑、ipadair已改沒跑)
-

    new Promise((resolve, reject)=>{
        let pic = new Image();
        pic.src = "./img/G_others/about_banner.png";
        pic.onload = function(){
           // 加载完成 
           resolve(pic)
        }
        pic.onerror = function(err) {
            // 加载失敗？ 
            reject(err);
        };
     }).then((pic)=>{
        const banner =document.getElementsByClassName("banner")[0].children[0];
        banner.src = pic.src;
    })



# 11/28
-object-fit:cover+position調位置(首頁底圖)。

    https://blog.camel2243.com/2017/01/21/css-object-fit-object-position-%E8%AA%BF%E6%95%B4%E7%BD%AE%E6%8F%9B%E5%85%83%E7%B4%A0img-%E7%AD%89%E7%9A%84%E5%85%A7%E5%AE%B9/
    
-搜尋輸入後按鈕＆色塊。（自動填入的要收回去）。
-login-i5 版面。(上傳)。
-index 輪播圖 模糊->原圖。
-all .jpg(&.png)->.webp。

    UPDATE `productImg` 
    SET `fileName` = REPLACE(`fileName`, '.jpg', '.webp')

-古比休閒躺椅。
-富蘭若 三人座沙發。
-首頁模糊banner比例。
-會員中心-手風琴icon

-燈箱z-index: >31(99)。
-search 排列圖片。
-後台-all .jpg(&.png)->.webp。
-webp已上傳、其他檔案還沒
-MinifyAll


-hideBox(z-index調高99)



-webpack(test)

下次討論：11/30 下午
command+P
alt+Z展開

# 12/1 or 2
-搜尋輸入後按鈕＆色塊。（自動填入交換）。
-搜尋console.log。


# 12/3
-桌機footer高度可以小一點


- [x] 1.）~~【略】購物須知可以點開某個其他收起來~~
- [x] 2.）footer很厚實---->【桌機footer高度可以小一點】。
          ==headerFooter_front.css、indexAbout_header.css==
- [x] 3.）~~【略】註冊日期可否用年份選擇~~
- [x] 4.）所有商品底圖有點慢 (class_1-s)
- [x] 5.）~~【略】所有商品點其中一類進去，手機沒有麵包屑要回到上一頁按另一類有點麻煩~~
- [x] 6.）看完一頁要滑到最上面有點煩，是否會新增回到最上面按鈕
          ==header_front.php、headerFooter_front.css、header_front.js、
          indexAbout_header.php、indexAbout_header.css、common/img/top.svg==
          
        滑到一定高度出現
        電腦尺寸可先設透明度hover再變1，平板手機不用
        長知識欸：event.preventDefault();
                https://www.w3schools.com/jsref/event_preventdefault.asp
        滾動去哪：Window.scrollTo()、Window.scroll()
        滾動特定距離：Window.scrollBy()
        緩動函數 (Easing function):
                a.）http://gizma.com/easing/
                b.）https://easings.net/zh-tw#easeInOutCirc
        
                  
- [x] 7.）銷售排行、新品上架商品圖片歪歪的 (一次一個商品)
- [x] 8.）~~【略】選擇顏色會跳到那個顏色的商品（包含購物車照片）~~
- [x] 9.）動畫很多，方向從不同地方來會沒有辦法聚焦（我們的故事圖片從右邊不旋轉、index baner、手機尺寸裝飾文字）
          ==index.php、index.css、img/G_others/index_banner.webp、index_banner-s.webp==
- [x] 10.）品牌介紹手機版椅子飄太快了(幅度＋高度)
          ==aboutUs.php、aboutUs.js、aboutUs.css==
- [x] 11.）商品類別（all類別都是）最上面圖片變型了(object-fit,object-position)
- [x] 12.）~~【略】付款跟收貨方式~~
- [x] 13.）會員中心手風琴點開來畫面會閃（ios6+、7、X、XR、11 pro、12 pro max、ipadair都跑---->【父層transform:Perspective(1000);】。
          ==memberArea.css==
- [x] 14.）手機版聯絡我們動畫那邊有點多餘，會有兩個聯絡我們(768以下隱藏+看動畫)---->【原本寫html{scroll-behavior: smooth;}-->改掉】。
          ==contact.php、contact.css、contact.js==

- [x] 15.）~~【略】銷售排行看不出來有沒有分名次~~
- [x] 16.）購物須知有重點反紅很棒，但感覺可以再多一點反紅字，比如數字的部分。
          ==shoppingNotes.css、shoppingNotes.js==
- [x] 17.）~~【略】商品類別選項的名稱，看可不可以換點有美感的名稱~~
    
        但這個人的建議是重新分類【略】ＸＤ
        沙發跟椅子都是坐的桌子跟櫃子又很相近
        我自己有可能的分類會是，闔家歡樂(客廳)，饗食生活(廚房)，秘密空間(房間)，細水長流(浴室或是廁所)
        
        
        
- [x] 18.）目前只改了購物須知內容
![](https://i.imgur.com/uViPZ2L.png)


＊讚美
1.）精選案例幫忙配商品很讚，選擇障礙救星
2.）UI設計很棒
3.）很有質感好想下單（希望降價＆有錢再下單（（笑

＊看不出來商品底圖有色差


#### ==[瑞貝卡動過的檔案：]()==
[common/]()

    header_front.php
    indexAbout_header.php
    
    css/
        headerFooter_front.css
        indexAbout_header.css
    js/
        header_front.js
    img/
        top.svg
        (增)indexAbout_logo.svg
        (刪)headerLogo.svg
        (刪)index_logo-01.webp
    
aboutUs.php
index.php
contact.php
index.php ???????????????????????????????
searchResult.php
searchResult_select.php

[css/]()

    aboutUs.css
    contact.css
    forgotPw.css
    index.css
    login.css
    memberArea.css
    register.css
    resetPw.css
    searchResult.css
    shoppingNotes.css

[js/]()

    aboutUs.js
    contact.js
    shoppingNotes.js

[img/]()
    
    G_others/
        index_banner.webp
        index_banner-s.webp
    H_class/
        class_1-s.webp
        
-------------我是分隔線-------------


# 12/7 晚上

<font color="#f00">**footer有改尺寸**</font>
==headerFooter_front.css、indexAbout_header.css==

```
    min-height: calc(100vh - 272px);
    左右padding: 6.25rem;

    @media (max-width: 1199.98px) {
        .class{
            min-height: calc(100vh - 320px);
        }
    }
    @media (max-width: 991.98px) {
        .class{
            min-height: calc(100vh - 224px);
            左右padding: 3.5rem;
        }
    }
    @media (max-width: 767.98px) {
        同上不用貼
    }
    @media (max-width: 575.98px) {
        .class{
            min-height: calc(100vh - 64px);
            左右padding: 2rem;
        }
    }
    ---------
    [沒有麵包屑的頁面]:
    ==forgotPw.css、login.css、register.css、resetPw.css==
    min-height: calc(100vh - 200px);

    @media (max-width: 1199.98px) {
        .class{
            min-height: calc(100vh - 248px);
        }
    }
    @media (max-width: 991.98px) {
        .class{
            min-height: calc(100vh - 224px);
        }
    }
    @media (max-width: 767.98px) {
        同上不用貼
    }
    @media (max-width: 575.98px) {
        .class{
            min-height: calc(100vh - 64px);
        }
    }
```


-iX 商品類別

-購物須知-標點符號、padding。==shoppingNotes.css、js==
-搜尋結果padding。==searchResult.css==
-聯絡我們-h1、title比重、電話＆地址。==contact.php、css、js==
-topBtn位置。==headerFooter_front.css、indexAbout_header.css、header_front.js==
-首頁&品牌故事-最上面icon。==indexAbout_header.php、css、增加indexAbout_logo.svg、刪除index_logo-01.webp、刪除headerLogo.svg==
-最小尺寸2rem 平板以下3.5rem
-首頁-==index.php、css、~~增加index_box2Bg1.svg、index_box2Bg2.svg~~==
-topBtn step(timestamp)
-金錢單位
~~-close.svg底色(底色拿掉會被吃掉ＱＱ)~~
-燈箱圖片大小
-筆電尺寸最小高度
![](https://i.imgur.com/VWdKVkz.png)


iPad+iPadpro min-height 100vh-header&footer
手機 min-height 100vh-header

待更新
php all(各7)
css all 
js product*4

# 12/10 or 11 -> 12

-重抓上面那坨->待更新。
-iX 11pro 商品類別。
-all圖片(用原本的)。
-首頁-平板＆手機。
-上傳購物須知。
-合併修改清單。

-productList.css
```
.soldArrows{
    white-space: nowrap;
}
```
-productClass.css
```
.newProduct-arrows{
    white-space: nowrap;
}
```
-productDetail.css
```
.addSup{
    white-space: nowrap;
}
```
# 12/14

-前台-忘記密碼icon + 所有min-height
-後台-會員管理順序、搜尋結果(會員管理-取消訂單->內容)、search、title

        forgotPw.php
        
        css/
            forgotPw.css
            login.css
            memberArea.css
            register.css
            resetPw.css
            searchResult.css
            shoppingNotes.css
            
        back/
            administratorList.php
            caseUpdate.php
            memberList.php
            (刪)memberList_select.php
            memberInsert.php
            memberUpdate.php
            orderList.php
            productList.php
            productInsert.php
            productUpdate.php
            searchResult.php

![](https://i.imgur.com/3kp4Gep.png)








# 12/15 pm 2:00

-銷量。
![](https://i.imgur.com/zPHsI6j.png)
==已更新，請重抓檔案。==

> front :
> pay_insert.php
> -pay.css
> -shoppingCart.css
> 
> back :
> orderList_update.php



# 1220

5-2.參考完整性限制（1頁）

# 1221
-家居/居家
canva字型
![](https://i.imgur.com/WlPM4Av.png)

-電腦圖片

    -https://www.freepik.com/free-psd/laptop-mockup-with-pastel-pink-wall_14412918.htm?query=computer&collectionId=1355&page=1&position=1&from_view=collections
    -https://www.freepik.com/free-psd/artist-room-decorated_12220977.htm?query=computer
    -https://www.freepik.com/free-psd/artist-room-decorated-with-responsive-website-mockup_12220967.htm?query=computer
    -https://www.freepik.com/free-psd/minimal-desktop-workspace-mock-up-design_15595745.htm?query=computer
    -https://www.freepik.com/free-psd/top-view-devices-with-mockup-leaves_10889707.htm?query=computer
    -https://www.freepik.com/free-psd/top-view-opened-laptop-with-screen-mockup-leaves_10889674.htm?query=computer
    -有瀏海的iphone頁面展開展示
    https://www.freepik.com/free-psd/phone-screen-ui-ux-app-presentation-mockup_12782460.htm#query=phone&position=48&from_view=keyword
    -iphone+ipad
    https://www.freepik.com/free-psd/smartphone-tablet-mock-up-composition_15164547.htm#query=Ipad%20Device&position=9&from_view=search
    -iphone+macbook
    https://www.freepik.com/free-psd/phone-notebook-screen-device-mockup_12782470.htm#query=iphone%20Device&position=48&from_view=search
    -macbook+ipad+iphone
    https://www.freepik.com/free-psd/digital-devices-screen-editable_16303836.htm?query=mockup%20phone

https://www.freepik.com/free-psd/laptop-screen-mockup-psd-desk-minimal-home-office-zone-design_16758708.htm

https://www.freepik.com/free-psd/digital-device-screen-mockup-vector-with-laptop-smartphone-with-gradient-wallpapers_17611603.htm

# 1223 下午確認 晚上最晚8點
-本機資料庫更新＆檢查
case orderBy caseProductNo

-php檔案:

    1.會員中心 > 訂單查詢 > 商品名稱 > (顏色)-->統一兩個字。
    2.購物車＆結帳 > 商品顏色：case6:配件-->套組。
    3.首頁 > title-->家居設計。
    4.header.js footer下一個display:none !important。
    5.會員中心 > amount普通/金卡會員。
    6.精選案例php-mini修改(手動mini+冒號改半形->原檔一起改)(其他如下)。
    7.刪除伺服器上五個類別當初測試增加的商品照。
    
------

  [6-1. 要更改的] 
  
    6-1.資料庫版本：更新caseProduct_1223.sql
    （下圖new是昨天改的，應該是抄本機但本機不是正確的所以一起錯。old是我去撈之前資料庫的）
    
![](https://i.imgur.com/tiQXChr.png)

------
  [6-2. 6.的問題發展史]

    6-2-1.資料庫版本：昨天更改資料庫「後」的版本（設定外來鍵之後）
          問題1:
              因為抄錯所以錯
              caseProductNo 1,2,10,12,
    
          問題2:
              發現順序跟網站截圖不一樣（但9月、跟12月截圖長一樣），所以去撈更改之前的資料庫
    
![](https://i.imgur.com/F2dqG5o.jpg)

 ------
    6-2-2.資料庫版本：昨天更改資料庫「前」版本（還沒設定外來鍵）
          
          問題：
              之前資料庫撈case的順序是按照productNo;加外來鍵變成按照caseProductNo。
              所以才mini改完怎麼對順序都不對
![](https://i.imgur.com/Ulyjz7j.jpg)

 ------
 
 目前長這樣
 ![](https://i.imgur.com/hbpClDk.png)
 
 # 1226 下午2點 
 
 # 0101 暫定晚上
 
 # 0110
 
 -以下兩個伺服器已上傳。
 
     -searchResult.css。
     -forgotPw.php。
     -img/C_desk/8-1.webp。
     -img/C_desk/8-5.webp。
 
 -以下都尚未上傳（已上傳）。
 
     -pay.css
     -shoppingCart.css
 
 -/back
     
     -[only_mini]administratorInsert.php
     ------------administratorUpdate_update.php
     -[only_mini]administratorUpdate.php
     ------------caseUpdate_update.php
     ------------caseUpdate.php
     ------------memberInsert_insert.php
     -[only_mini]memberInsert.php
     -[only_mini]memberOrderInsert.php
     ------------memberUpdate_update.php
     ------------memberUpdate.php
     -[only_mini]orderDetail.php
     ------------productInsert_insert.php
     ------------productInsert.php
     ------------productUpdate_update.php
     ------------productUpdate.php

     /css
     -productInsert.css
     -productUpdate.css
     
     /js
     -caseUpdate.js
     -memberOrderInsert.js
     -productInsert.js
     -productList.js
     -productUpdate.js

 # 0113 下午
  檢查網頁(伺服器)
  
  
 # 0114 睡前記事
 wireframe_back-彩色版每頁的title要記得統一位置。
 表格規格敘述所有色彩字數記得統一。
  
  
 # 0116
 -productList.php
  
 
 # 待修改：
-資料庫重建。
-資料流程圖。
-ERmodel增加購物車。
-wireframe
-系統文件










