|
|
.liPrdHistory { text-align:left; }
.ulPrdHistory { }
.divPrdHistory { text-align:center; }
.historyAddCart { display:flex; justify-content:center; margin-top:8px; }
.mePrdHistory .meMsg_MsgTitle {
color: var(--black);
font-size: var(--h4-font-size);
font-weight: 500;
text-align: left;
border-color: var(--grey-lightest);
}
.mePrdHistory .PrdImg {
margin: 12px auto 8px;
display: flex;
justify-content: center;
position: relative;
}
.mePrdHistory .PrdImg img {
width: 100%;
object-fit: contain;
aspect-ratio: 1;
}
.mePrdHistory .PrdTitle {
font-weight: 500;
text-align: center;
margin-bottom: 8px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.mePrdHistory .PrdPrice {
font-weight: 500;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.historyAddCart img {
max-width: 32px;
cursor: pointer;
}
.mePrdHistory ul.ulIconSale {
margin: 0;
list-style: none;
padding: 0;
position: absolute;
}
.mePrdHistory .USD {
width: 100%;
display: block;
text-align: center;
}
/*新scroll bar*/
.inc_msg_PrdHistory::-webkit-scrollbar {
width: 2px;
background-color: #d9d9d9;
}
.inc_msg_PrdHistory {
max-height: 680px;
overflow-y: auto;
padding-right: 12px;
}
.inc_msg_PrdHistory::-webkit-scrollbar-thumb {
background-color: #969696;
}
|
.divSitePath { text-align:left; }
.divSitePath.A2 { text-align:center; }
.divSitePath .SitePathA { }
.divSitePath .SitePathD { }
|
| | |
|
$IconSale$
$PrdImgM$
加入購物車
.PrdList .tdCol {vertical-align:top; padding:8px; }
.PrdList .PrdListCont { text-align:center; }
.PrdList .PrdCell { width:100%; }
.PrdList .PrdCell .PrdImgM { margin-bottom:8px; }
.PrdList .PrdCell .PrdImgM img { max-width:300px; max-height:300px; }
.PrdList .PrdCell .PrdImgB { margin-bottom:8px; }
.PrdList .PrdCell .PrdImgB img { max-width:300px; max-height:300px; }
.PrdList .PrdCell .PrdContent { margin-bottom:4px; }
.PrdList .PrdCell .PrdTitle { line-height:125%; margin-top:4px; margin-bottom:4px; color:#222222;}
.PrdList .PrdCell .PrdDesc { line-height:125%; margin-bottom:4px; color:#666666; text-align:left; }
.PrdList .PrdCell .PrdPrice { margin-bottom:4px; }
.PrdList .PrdCell .PriceName {}
.PrdList .PrdCell .DollarSign { font-weight:600;}
.PrdList .PrdCell .PriceAmt {}
.PrdList .PrdCell .DollarUnit { display: none;}
.PrdList .PrdCell .PrdCtrl { margin-bottom:8px; }
.PrdList .PrdCell .PrdQty {}
.PrdList .PrdCell .PrdBtn {}
.PrdList .PrdCell .PrdExt {}
/* 預設 */
.PrdList .SaleBtn1 { border:1px solid #aa0000; background:#cc0000; color:var(--white); padding-left:4px;
padding-right:4px; white-space:nowrap; cursor:pointer; }
.PrdList .SaleBtn1:hover { background:#ff0000; }
/* 正常 */
.PrdList .SaleBtn2 { border:1px solid #aa0000; background:#cc0000; color:var(--white); padding-left:4px;
padding-right:4px; white-space:nowrap; cursor:pointer; }
.PrdList .SaleBtn2:hover { background:#ff0000; }
/* 預購 */
.PrdList .SaleBtn3 { border:1px solid #0000aa; background:#000088; color:#ffff00; padding-left:4px;
padding-right:4px; white-space:nowrap; cursor:pointer; }
.PrdList .SaleBtn3:hover { background:#0000cc; }
/* 郵購 */
.PrdList .SaleBtn4 { border:1px solid #0000aa; background:#000088; color:#ffff00; padding-left:4px;
padding-right:4px; white-space:nowrap; cursor:pointer; }
.PrdList .SaleBtn4:hover { background:#0000cc; }
/* 補貨 */
.PrdList .SaleBtn5 { border:1px solid #006600; background:#008800; color:var(--white); padding-left:4px;
padding-right:4px; white-space:nowrap; cursor:pointer; }
.PrdList .SaleBtn5:hover { background:#00cc00; }
/* 停售 */
.PrdList .SaleBtn6 { border:1px solid #666666; background:#888888; color:var(--white); padding-left:4px;
padding-right:4px; white-space:nowrap; }
.PrdList .SaleBtn6:hover { background:#cccccc; }
/* 售完 */
.PrdList .SaleBtn7 { border:1px solid #666666; background:#888888; color:var(--white); padding-left:4px;
padding-right:4px; white-space:nowrap; }
.PrdList .SaleBtn7:hover { background:#cccccc; }
/* 競標 */
.PrdList .SaleBtn8 { border:1px solid #aa0000; background:#cc0000; color:#ffff00; padding-left:4px;
padding-right:4px; white-space:nowrap; cursor:pointer; }
.PrdList .SaleBtn8:hover { background:#ff0000; }
/* 推薦 */
.PrdList .PrdListExtBtn { border:1px solid #998800; background:#aa8800; color:var(--white); padding-left:4px;
padding-right:4px; white-space:nowrap; cursor:pointer; }
.PrdList .PrdListExtBtn:hover { background:#ddcc00; }
/* 紅利兌換 */
.tableExchg { width:100%; }
.tableExchg th , .tableExchg td { padding-top:2px; padding-bottom:2px; padding-left:4px; padding-right:4px;
white-space:nowrap; font-weight:normal; color:#444444; border-radius:4px; }
.tableExchg th { text-align:center; background:#dddddd; }
.tableExchg td { text-align:center; }
.tableExchg .tdExchgBtn div { border-radius:4px; background:#cc0000; color:var(--white); padding-left:4px;
padding-right:4px; text-align:center; }
.tableExchg .tdExchgBtn div:hover { background:#ff0000; cursor:pointer; }
.tableExchg .spanExchgPt , .tableExchg .spanExchgAmt { font-weight:bold; color:red; }
/* 基本定義 */
#id_Content {
width: 100%;
}
.lmPrdListCard .PrdImgURL {
display: flex;
width: fit-content;
}
.lmPrdListCard .PrdImgURL img {
width: var(--prd-width);
height: var(--prd-width);
transition: all .4s ease-in;
object-fit: contain;
}
.PrdTitleText {
font-size: var(--h4-font-size);
font-weight: 500;
line-height: 150%;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.PrdImgBlock {
position: relative;
}
.lmPrdListCard ul {
padding: 0;
margin: 0 0 0 0;
position: absolute;
left: 0;
top: 0;
max-width: 40px;
}
.lmPrdListCard li {
list-style: none;
}
.PriceName {
display: none;
}
.PrdPriceBox {
display: flex;
justify-content: center;
align-items: center;
column-gap: 12px;
}
.PrdPriceText {
font-size: var(--h4-font-size);
}
.PrdPriceText .USD {
font-size: var(--regular-font-size);
}
.PrdPriceAmt {
font-weight: 600;
}
.AddBtn a {
display: block;
background-color: var(--dark-theme-color);
font-family: var(--chinese-font);
font-weight: 500;
color: var(--white);
width: var(--prd-width);
padding: 8px 0;
}
/* 促銷圖示 */
.lmPrdListCard .ulIconSale {
width: var(--prd-width);
left: calc((100% - var(--prd-width)) / 2);
max-width: none;
pointer-events: none;
}
.lmPrdListCard .ulIconSale li {
text-align: left;
}
.lmPrdListCard.blockStyle {
/*display: none;*/
}
.lmPrdListCard.listStyle {
display: none;
}
/* 格狀排列 */
.blockStyle .AddBtn {
position: absolute;
left: calc((100% - var(--prd-width)) / 2);
bottom: 1px;
display: none;
}
.blockStyle .PrdImgBlock {
margin-bottom: 10px;
}
.PrdList .PrdCell .blockStyle .PrdTitle {
max-width: var(--prd-width);
}
.blockStyle .PrdImgBlock:hover .AddBtn {
display: block;
}
/* 列表排列 */
@media screen and (min-width: 768px) {
.lmPrdListCard.listStyle {
display: none;
}
.lmListStyle .lmPrdListCard.listStyle {
display: flex;
align-items: center;
padding: 0 0 20px 0;
column-gap: 28px;
border-bottom: 1px solid #bbb066;
}
.lmListStyle .lmPrdListCard.blockStyle {
display: none;
}
.lmListStyle .PrdList .trRow>table>tbody>tr {
display: flex;
flex-direction: column;
}
.lmListStyle .PrdList .tdCol {
width: 100%;
}
.lmListStyle .PrdPriceText,.lmListStyle .PrdPriceBox .USD {
width: var(--prd-width);
text-align: left;
/* margin-bottom: 12px; */
font-size: var(--big-font-size);
}
.lmListStyle .lmPrdListCard .PrdImgURL img {
min-width: 180px;
min-height: 180px;
}
.lmListStyle .lmPrdListCard .PrdTitleText {
text-align: left;
font-size: var(--big-font-size);
margin-top: 16px;
}
.lmListStyle .lmPrdListCard .PrdTitle {
width: 100%;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-column-gap: 8px;
-moz-column-gap: 8px;
column-gap: 8px;
grid-gap: 8px;
padding-right: 20px;
}
.lmListStyle .lmPrdListCard .PrdPriceBox {
flex-direction: column;
align-items: flex-end;
}
.lmListStyle .lmPrdListCard .PrdDesc {
flex: 1 1 60px;
}
.lmListStyle .AddBtn a {
background-color: var(--theme-color);
}
.lmListStyle .AddBtn a:hover{
background-color: var(--dark-theme-color);
}
}
/* 喜愛 */
.FaveBtn {
position: absolute;
top: -6px;
left: calc(((100% - var(--prd-width)) / 2) + 8px);
width: var(--prd-width);
justify-content: end;
display: flex;
}
.cssPrdInfoFave {
cursor: pointer;
width: 32px;
height: 32px;
background: url(/shop/shop/ClassInfo/270836890_20230912_10465343_bTN.svg) no-repeat;
background-position: 50% 60%;
background-color: var(--grey-lighter);
border-radius: 50%;
display: none;
}
.cssPrdInfoFave1 {
background-image: url(/shop/shop/ClassInfo/1722618121_20230912_10481295.svg);
display: block
}
.blockStyle .PrdImgBlock:hover .cssPrdInfoFave {
display: block;
}
.lmListStyle .FaveBtn {
width: var(--prd-width);
left: calc(((100% - var(--prd-width)) / 2) + 8px);
}
.lmPrdListCard.listStyle:hover .cssPrdInfoFave {
display: block;
}
.USDcoin .lmPrdListCard.listStyle .USD {
/* display: inline; */
font-size: var(--regular-font-size);
font-weight: 400;
margin: 4px 0 8px;
}
/* 售完 */
.blockStyle .SoldOutBtn {
position: absolute;
left: calc((100% - var(--prd-width)) / 2);
bottom: 1px;
}
.soldOut {
background-color: var(--grey-dark);
font-family: var(--chinese-font);
font-weight: 500;
color: var(--white);
width: var(--prd-width);
padding: 8px 0;
display: none;
}
.stocking {
background-color: var(--grey-dark);
font-family: var(--chinese-font);
font-weight: 500;
color: var(--white);
width: var(--prd-width);
padding: 8px 0;
display: none;
}
.tdCol[s1='售完'] .lmPrdListCard .PrdImgBlock .AddBtn, .tdCol[s1='停售'] .lmPrdListCard .PrdImgBlock .AddBtn,
.tdCol[s1='補貨'] .lmPrdListCard .PrdImgBlock .AddBtn {
display: none;
}
.tdCol[s1='售完'] .lmPrdListCard .PrdImgBlock .MailBtn, .tdCol[s1='停售'] .lmPrdListCard .PrdImgBlock .MailBtn,
.tdCol[s1='補貨'] .lmPrdListCard .PrdImgBlock .MailBtn {
display: none;
}
.tdCol[s1='售完'] .lmPrdListCard .PrdImgBlock .soldOut {
display: block;
}
.tdCol[s1='停售'] .lmPrdListCard .PrdImgBlock .soldOut {
display: block;
}
.tdCol[s1='補貨'] .lmPrdListCard .PrdImgBlock .stocking {
display: block;
}
.tdCol[s1='售完'] .lmPrdListCard .PrdPriceBox .AddBtn, .tdCol[s1='停售'] .lmPrdListCard .PrdPriceBox .AddBtn, .tdCol[s1='補貨']
.lmPrdListCard .PrdPriceBox .AddBtn {
display: none;
}
.tdCol[s1='售完'] .lmPrdListCard .PrdPriceBox .soldOut {
display: block;
}
.tdCol[s1='停售'] .lmPrdListCard .PrdPriceBox .soldOut {
display: block;
}
.tdCol[s1='補貨'] .lmPrdListCard .PrdPriceBox .stocking {
display: block;
}
/* 郵購按鈕 */
.blockStyle .MailBtn {
position: absolute;
left: calc((100% - var(--prd-width)) / 2);
bottom: 1px;
display: none;
}
.mail {
background-color: midnightblue;
font-family: var(--chinese-font);
font-weight: 500;
color: var(--white);
width: var(--prd-width);
padding: 8px 0;
display: none;
cursor: pointer;
}
.tdCol[s1='郵購'] .lmPrdListCard .PrdImgBlock .mail {
display: block;
}
.blockStyle .PrdImgBlock:hover .MailBtn {
display: block;
}
.tdCol[s1='郵購'] .lmPrdListCard .PrdTitle .mail {
display: block;
}
.tdCol[s1='郵購'] .lmPrdListCard .PrdImgBlock .AddBtn, .tdCol[s1='郵購'] .lmPrdListCard .PrdTitle .AddBtn {
display: none;
}
.tdCol[s1='郵購'] .lmPrdListCard .PrdImgBlock .SoldOutBtn, .tdCol[s1='郵購'] .lmPrdListCard .PrdTitle .SoldOutBtn {
display: none;
}
@media screen and (max-width: 768px) {
.tdCol[s1='郵購'] .blockStyle .MailBtn {
display: block;
}
}
/* 優惠價格 */
.lmPrdListCard .spanPrdExPrice {
display: block;
font-weight: 600;
}
.lmPrdListCard .spanPrdDisPrice {
display: block;
font-weight: 600;
}
.lmPrdListCard.listStyle .spanPrdExPrice {
margin-bottom: 4px;
}
.spanPrdExPrice[style=""] + .PriceName + .DollarSign {
text-decoration: line-through;
color: var(--grey-dark);
}
.spanPrdExPrice[style=""] ~ .PriceName ~ .DollarSign {
text-decoration: line-through;
color: var(--grey-dark);
}
.spanPrdExPrice[style=""] + .PriceName + .DollarSign + .PrdPriceAmt {
text-decoration: line-through;
color: var(--grey-dark);
padding-left: 0;
}
.spanPrdExPrice[style=""] ~ .PriceName ~ .DollarSign ~ .PrdPriceAmt {
text-decoration: line-through;
color: var(--grey-dark);
padding-left: 0;
}
.spanPrdDisPrice[style=""] + .PriceName + .DollarSign {
text-decoration: line-through;
color: var(--grey-dark);
}
.spanPrdDisPrice[style=""] ~ .PriceName ~ .DollarSign {
text-decoration: line-through;
color: var(--grey-dark);
}
.spanPrdDisPrice[style=""] + .PriceName + .DollarSign + .PrdPriceAmt {
text-decoration: line-through;
color: var(--grey-dark);
padding-left: 0;
}
.spanPrdDisPrice[style=""] ~ .PriceName ~ .DollarSign ~ .PrdPriceAmt {
text-decoration: line-through;
color: var(--grey-dark);
padding-left: 0;
}
.PrdPriceBox:has(.spanPrdExPrice[style=""] .USD) + .USD {
text-decoration: line-through;
color: var(--grey-dark);
}
.PrdPriceText:has(.spanPrdExPrice[style=""]) +.USD {
text-decoration: line-through;
color: var(--grey-dark);
}
.PrdPriceBox:has(.spanPrdDisPrice[style=""]) + .USD {
text-decoration: line-through;
color: var(--grey-dark);
}
.PrdPriceText:has(.spanPrdDisPrice[style=""]) + .USD {
text-decoration: line-through;
color: var(--grey-dark);
}
/* RWD */
@media screen and (max-width: 1120px) and (min-width: 1020px) {
:root {
--prd-width: 165px;
}
}
@media screen and (max-width: 900px) and (min-width: 768px) {
:root {
--prd-width: 165px;
}
}
@media screen and (max-width: 768px) {
.PrdList {
padding: 0 8px;
}
.PrdList .ColN_4 > tbody > tr {
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 8px;
}
.PrdList .tdGap {
display: none;
}
.PrdList td.tdCol {
width: 100%;
}
.PrdList td.tdCol > center {
display: block;
height: 100%;
}
.tdCol > center > .PrdCell {
height: 100%;
}
.lmListStyle .lmPrdListCard.listStyle {
column-gap: 12px;
}
.lmListStyle .lmPrdListCard .PrdImgURL img {
min-width: unset;
}
.PrdList .PrdCell .DollarSign {
font-size: var(--big-font-size);
}
.lmPrdListCard.listStyle {
display: none;
}
/* 直接顯示按鈕 */
.PrdImgBlock {
position: unset;
}
.lmPrdListCard {
position: relative;
padding-bottom: 48px;
height: 100%;
}
.blockStyle .AddBtn {
display: block;
}
.cssPrdInfoFave {
display: block;
}
}
@media screen and (max-width: 480px) {
:root {
--prd-width: 150px;
}
.lmListStyle .lmPrdListCard .PrdTitle {
padding-right: 10px;
}
.PrdList {
padding: 0 4px;
}
}
| |
| | |
#PageCtrl {
font-family: var(--number-font);
text-align: center;
}
#PageCtrl a {
color: var(--grey-darker);
}
#PageCtrl a:hover {
color:#ff6622;
}
#PageCtrl .PageBtn {
border: 1px solid var(--grey-lightest);
width: 30px;
height: 30px;
line-height: 28px;
display: inline-block;
margin-left:3px;
margin-right:3px;
}
#PageCtrl .OtherPage {
border: 1px solid var(--grey-lightest);
width: 30px;
height: 30px;
line-height: 28px;
display: inline-block;
text-indent: 1px;
}
/* 舊的 */
/* #PageCtrl .ThisPage {
color: var(--black);
font-weight: bold;
border: 1px solid var(--grey-lighter);
width: 25px;
height: 25px;
line-height: 23px;
display: inline-block;
background: var(--grey-lighter);
}
*/
/* END */
/* 新的 */
#PageCtrl .ThisPage {
color: #000000;
font-weight: bold;
}
/* END */
#PageCtrl .RecCount {
font-weight:bold;
}
|
|
| |
