关于css:CSS书写案例

48次阅读

共计 26310 个字符，预计需要花费 66 分钟才能阅读完成。

1、common.css
/ common.css /

@charset “UTF-8”;

/ 汇合所有插件 /

  • {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }

body,
button,
code,
dd,
dl,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
input,
legend,
menu,
ol,
p,
pre,
textarea,
ul {

margin: 0;
padding: 0;

}

article,
aside,
details,
footer,
header,
iframe,
menu,
nav,
section {

display: block;

}

button,
fieldset,
iframe,
img {

border: 0;

}

h1,
h2,
h3,
h4,
h5,
h6 {

font-size: 100%;
font-weight: 400;

}

table {

border-collapse: collapse;
border-spacing: 0;

}

em,
i {

font-style: normal;

}

li,
ol,
summary,
ul {

list-style: none;

}

a,
a:active,
a:hover {

text-decoration: none;

}

body,
button,
html {

-webkit-text-size-adjust: none;

}

button,
input,
select,
textarea {

-webkit-appearance: none;

}

a,
button,
input,
textarea {

-webkit-tap-highlight-color: transparent;

}

mark {

background-color: transparent;

}

em,
i {

font-style: normal;

}

img {

max-width: 100%;
border: none;
vertical-align: middle;

}

a:focus,
button,
button:focus,
i:focus,
img:focus,
input,
input:focus,
li:focus,
select,
select:focus,
span:focus,
summary,
textarea,
textarea:focus {

outline: 0;

}

body {

font-family: "PingFang SC", "Droid Sans", arial, "Helvetica Neue", Helvetica, sans-serif;
line-height: normal;
color: #666;
background-color: #f8f8f8;
-webkit-user-select: none;
-webkit-overflow-scrolling: touch;
-webkit-font-smoothing: antialiased;

}

  • {
    margin: 0;
    padding: 0;
    outline: none;
    word-wrap: break-word;
    word-break: break-word;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    -webkit-font-smoothing: antialiased;
    }

*:not(input, select, textarea) {

-webkit-user-select: none;
-webkit-touch-callout: none;

}

html {

font-size: 100px;

}

html {

height: 100%;

}

input,
textarea,
keygen,
select,
button {

font-size: 12px;
border: 0;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;

}

::-webkit-input-placeholder {

color: #ccc;

}

a {

text-decoration: none;

}

body {

margin-left: auto;
margin-right: auto;
height: auto;
color: #1e1e1e;
background: #f5f5f5;
-webkit-font-smoothing: antialiased;

}

header+section {

padding-top: .88rem;

}

section {

padding-bottom: .2rem;

}

.lazy-img,
.lazy-img-s {

display: block;
background: #f9f9f9 url(data:image/png;base64,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) center center no-repeat;

}

.lazy-img {

background-size: 2rem .69rem;

}

.lazy-img-s {

background-size: 80% auto;

}

.pec-flex, .pec-align-center, .pec-space-between, .pec-flex-start, .pec-flex-end, .pec-flex-vertical, .pa-picker-item, .pa-picker-item-head, .footer {

display: -webkit-box;
display: -webkit-flex;
display: flex;

}

.pec-flex1, .pa-picker-item-body {

-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;

}

.pec-flex-vertical {

-webkit-box-orient: vertical;
-webkit-flex-direction: column;
flex-direction: column;

}

.footer {

-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;

}

.pec-space-between, .pa-picker-item {

-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;

}

.pec-flex-start {

-webkit-box-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;

}

.pec-flex-end {

-webkit-box-align: end;
-webkit-align-items: flex-end;
align-items: flex-end;

}

.pec-align-center, .pec-space-between, .pa-picker-item, .pa-picker-item-head, .footer {

-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;

}

.pec-bgc-greyf5 {

background: #f5f5f5 !important;

}

.pec-bgc-transparent {

background: transparent !important;

}

.pec-bgc-fff {

background: #fff !important;

}

.pec-special-font {

font-family: "HelveticaNeue", "Helvetica Neue", "TeXGyreHeros", "Helvetica", "Tahoma", "Geneva", "Arial", "sans-serif";
font-stretch: normal;
font-weight: 400;
color: #ff7214;

}

.pec-holderbox {

width: 100%;
height: .2rem;
font-size: 0;
background: #f5f5f5;

}

.pec-por {

position: relative !important;

}

.pec-poa {

position: absolute !important;

}

.pec-pof {

position: fixed !important;

}

.pec-fr {

float: right;

}

.pec-fl {

float: left;

}

.pec-tal {

text-align: left !important;

}

.pec-tac {

text-align: center !important;

}

.pec-taj {

text-align: justify;

}

.pec-tar {

text-align: right;

}

.pec-vam {

vertical-align: middle;

}

.pec-dsn {

display: none !important;

}

.pec-dsb {

display: block !important;

}

.pec-unvis {

visibility: hidden;

}

.pec-dsib {

display: inline-block !important;
vertical-align: top;

}

.pec-elli {

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

}

.pec-fwb {

font-weight: 700;

}

.pec-pnone {

padding: 0 !important;

}

.pec-ml20 {

margin-left: 0.2rem !important;

}

.pec-ml40 {

margin-left: 0.4rem !important;

}

.pec-mt20 {

margin-top: 0.2rem !important;

}

.pec-bt-0 {

border-top: 0 !important;

}

.pec-bb-0 {

border-bottom: 0 !important;

}

hr.hr {

font-size: 0;
display: block;
border: 1px solid #e7e7e7;

}

.pec-link {

color: #3769fc !important;

}

.pec-link:active,
.pec-link:visited {

color: #3769fc;

}

.pec-box-center {

display: -webkit-box;
display: box;
-webkit-box-pack: center;
box-pack: center;

}

.page-full {

height: 100%;

}

.page-full section.pec-flex-vertical {

height: 100%;
padding-bottom: 0;

}

.page-full section.pec-flex-vertical>.pec-flex1 {

max-height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: .2rem;

}

.page-full section.pec-flex-vertical>.pec-flex1 .pec-btn-zone {

margin-bottom: .2rem;

}

.page-full section.pec-flex-vertical>.pec-fiexd-btn {

position: relative;

}

.pa-picker-item:after {

content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: #e7e7e7;

}
.isandroid .pa-picker-item:after {

-webkit-transform: scale(1, 0.5);
transform: scale(1, 0.5);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;

}

.fwb {

font-family: 'PingFangSC-Medium', 'Droid Sans', arial, 'Helvetica Neue', Helvetica, sans-serif;

}

.isandroid .fwb {

font-weight: 700;

}

.pa-pop-picker {

position: fixed;
left: 0;
bottom: 0;
z-index: 550;
width: 100%;
background: #fff;

}

.pa-picker-title {

position: relative;
height: 1rem;
line-height: 1rem;
background: #f8f8f8;

}
.pa-picker-title-head {

position: absolute;
top: 0;
left: 0;
height: 1rem;
padding: 0 .32rem;
line-height: 1rem;
color: #b2b2b2;
font-size: 0.3rem;

}
.pa-picker-title-body {

padding: 0 2rem;
font-size: 0.34rem;
color: #1e1e1e;
text-align: center;

}
.pa-picker-title-foot {

position: absolute;
top: 0;
right: 0;
height: 1rem;
padding: 0 .32rem;
line-height: 1rem;
color: #ff7214;
font-size: 0.3rem;

}
.pa-picker-list {

position: relative;
height: 7.72rem;
overflow-y: auto;

}
.pa-picker-item {

position: relative;
min-height: 1.12rem;
padding: .31rem 0 .31rem .32rem;

}
.pa-picker-item:after {

left: 1.04rem;

}
.pa-picker-item:last-child:after {

left: 0;

}
.pa-picker-item-head {

width: .48rem;
height: .48rem;
margin-right: .24rem;

}
.pa-picker-item-head img {

width: 100%;

}
.pa-picker-item-body {

margin-right: .3rem;
color: #1e1e1e;
font-size: 0.32rem;

}
.pa-picker-item-foot {

margin-right: .32rem;

}
.pa-picker-item-tips {

margin-top: .04rem;
color: #999;
font-size: 0.24rem;

}

.footer {

position: relative;
padding: .3rem .3rem .1rem;
text-align: center;

}

.footer:before,
.footer:after {

content: "";
display: block;
width: .36rem;
height: 2px;
margin: 0 .12rem;
background: #ccc;

}

.footer .footer-txt {

font-size: 0.26rem;
color: #ccc;

}

.pa-fix-mask,
.pa-fix-mask body {

overflow: hidden !important;

}

2、pingjia.css
@charset “UTF-8”;
/ 汇合所有插件 /
.pec-btn-zone, .ping-head, .ping-foot, .jia-one, .ping-foot-link, .evaluate-list, .evaluate-item {
display: -webkit-box;
display: -webkit-flex;
display: flex;
}

.pec-flex1, .pec-btn-zone button {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}

.evaluate-list, .evaluate-item {
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
}

.ping-head, .ping-foot, .jia-one, .ping-foot-link {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}

.ping-head {
-webkit-box-align: end;
-webkit-align-items: flex-end;
align-items: flex-end;
}

.pec-btn-zone, .ping-foot, .jia-one, .ping-foot-link, .evaluate-list, .evaluate-item {
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}

.pec-bgc-fff {
background: #fff !important;
}

.pec-mt20 {
margin-top: 0.2rem !important;
}

.page-full {
height: 100%;
}
.isandroid .pec-btn-price:before {
-webkit-transform: scale(1, 0.5);
transform: scale(1, 0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
[data-dpr=”1″] .pec-btn-price:before {
-webkit-transform: scale(1, 0.5);
transform: scale(1, 0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}

.ping-title, .ping-em, .jia-title {
font-weight: 500;
}
.isandroid .fwb, .isandroid .ping-title, .isandroid .ping-em, .isandroid .jia-title {
font-weight: 700;
}

:root {
–poppy_color_brand_primary1: #ff4800;
–poppy_color_brand_primary2: #ff7214;
–poppy_color_brand_primary1_custom: #ff4800;
–poppy_color_brand_primary_gradual: #ff7214;
–poppy_color_brand_primary_gradual2: #ff4800;
–poppy_color_brand_second1: #1a1f36;
–poppy_color_brand_second2: #454f5f;
–poppy_color_state_success: #00bdae;
–poppy_color_state_warning: #f00;
–poppy_color_state_remind: #ff7214;
–poppy_color_state_link: #4c88bd;
–poppy_color_state_prompt: #ffb112;
–poppy_color_white: #fff;
–poppy_color_dark: #000;
–poppy_color_bg_1: #fff;
–poppy_color_bg_2: #f8f8f8;
–poppy_color_bg_3: #eee;
–poppy_color_positive_level1: black;
–poppy_color_positive_level2: rgba(0, 0, 0, 0.8);
–poppy_color_positive_level3: rgba(0, 0, 0, 0.6);
–poppy_color_positive_level4: rgba(0, 0, 0, 0.4);
–poppy_color_positive_level5: rgba(0, 0, 0, 0.2);
–poppy_color_negative_level1: white;
–poppy_color_negative_level2: rgba(255, 255, 255, 0.8);
–poppy_color_negative_level3: rgba(255, 255, 255, 0.6);
–poppy_color_negative_level4: rgba(255, 255, 255, 0.4);
–poppy_color_negative_level5: rgba(255, 255, 255, 0.2);
–poppy_color_fg_mask: rgba(0, 0, 0, 0.7);
–poppy_color_fg_line: rgba(0, 0, 0, 0.04);
–poppy_color_box_shadow: rgba(0, 0, 0, 0.05);
–poppy_color_fg_press: rgba(0, 0, 0, 0.08);
–poppy_color_active: rgba(255, 72, 0, 0.08);
–poppy_fontsize_large_plus_xx: .72rem;
–poppy_fontsize_large_plus_x: .64rem;
–poppy_fontsize_large_plus_xs: .6rem;
–poppy_fontsize_large_plus: .56rem;
–poppy_fontsize_large_xx: .52rem;
–poppy_fontsize_large_x: .48rem;
–poppy_fontsize_large_s: .44rem;
–poppy_fontsize_large: .4rem;
–poppy_fontsize_medium_xx: .36rem;
–poppy_fontsize_medium_x: .32rem;
–poppy_fontsize_medium: .28rem;
–poppy_fontsize_small: .24rem;
–poppy_fontsize_small_s: .2rem;
–poppy_fontsize_small_ss_s: .16rem;
–poppy_fontsize_small_ss: .14rem;
–poppy_fontsize_badge_small_ss_s: .16rem;
–poppy_fontsize_badge_small_ss: .14rem;
–poppy_font_weight_regular: 400;
–poppy_font_weight_medium: 500;
–poppy_font_weight_bold: 700;
}

:root.isandroid {
–poppy_font_weight_medium: 700;
}

@supports (color: color(display-p3 1 1 1)) {
:root {

--poppy_color_brand_primary1: color(display-p3 var(---poppy_color_brand_primary1));
---poppy_color_brand_primary1: 1 .282353 0;
--poppy_color_brand_primary2: color(display-p3 var(---poppy_color_brand_primary2));
---poppy_color_brand_primary2: 1 .447059 .0784314;
--poppy_color_brand_primary1_custom: color(display-p3 var(---poppy_color_brand_primary1_custom));
---poppy_color_brand_primary1_custom: 1 .282353 0;
--poppy_color_brand_second1: color(display-p3 var(---poppy_color_brand_second1));
---poppy_color_brand_second1: .101961 .121569 .211765;
--poppy_color_brand_second2: color(display-p3 var(---poppy_color_brand_second2));
---poppy_color_brand_second2: .270588 .309804 .372549;
--poppy_color_state_success: color(display-p3 var(---poppy_color_state_success));
---poppy_color_state_success: 0 .741176 .682353;
--poppy_color_state_warning: color(display-p3 var(---poppy_color_state_warning));
---poppy_color_state_warning: 1 0 0;
--poppy_color_state_remind: color(display-p3 var(---poppy_color_state_remind));
---poppy_color_state_remind: 1 .447059 .0784314;
--poppy_color_state_link: color(display-p3 var(---poppy_color_state_link));
---poppy_color_state_link: .298039 .533333 .741176;
--poppy_color_state_prompt: color(display-p3 var(---poppy_color_state_prompt));
---poppy_color_state_prompt: 1 .694118 .070588;
--poppy_color_white: color(display-p3 var(---poppy_color_white));
---poppy_color_white: 1 1 1;
--poppy_color_dark: color(display-p3 var(---poppy_color_dark));
---poppy_color_dark: 0 0 0;
--poppy_color_bg_1: color(display-p3 var(---poppy_color_bg_1));
---poppy_color_bg_1: 1 1 1;
--poppy_color_bg_2: color(display-p3 var(---poppy_color_bg_2));
---poppy_color_bg_2: .972549 .972549 .972549;
--poppy_color_bg_3: color(display-p3 var(---poppy_color_bg_3));
---poppy_color_bg_3: .933333 .933333 .933333;
--poppy_color_positive_level1: color(display-p3 var(---poppy_color_dark)/1);
--poppy_color_positive_level2: color(display-p3 var(---poppy_color_dark)/0.8);
--poppy_color_positive_level3: color(display-p3 var(---poppy_color_dark)/0.6);
--poppy_color_positive_level4: color(display-p3 var(---poppy_color_dark)/0.4);
--poppy_color_positive_level5: color(display-p3 var(---poppy_color_dark)/0.2);
--poppy_color_negative_level1: color(display-p3 var(---poppy_color_white)/1);
--poppy_color_negative_level2: color(display-p3 var(---poppy_color_white)/0.8);
--poppy_color_negative_level3: color(display-p3 var(---poppy_color_white)/0.6);
--poppy_color_negative_level4: color(display-p3 var(---poppy_color_white)/0.4);
--poppy_color_negative_level5: color(display-p3 var(---poppy_color_white)/0.2);
--poppy_color_fg_mask: color(display-p3 var(---poppy_color_dark)/0.7);
--poppy_color_fg_line: color(display-p3 var(---poppy_color_dark)/0.04);
--poppy_color_box_shadow: color(display-p3 var(---poppy_color_dark)/0.05);
--poppy_color_fg_press: color(display-p3 var(---poppy_color_dark)/0.08);
--poppy_color_active: color(display-p3 var(---poppy_color_brand_primary1)/0.08);

}
}
@supports (color: color(display-p3 1 1 1)) and (top: env(safe-area-inset-top)) {
:root {

--poppy_color_brand_primary_gradual: color(display-p3 var(---poppy_color_brand_primary_gradual));
---poppy_color_brand_primary_gradual: 1 .447059 .0784314;
--poppy_color_brand_primary_gradual2: color(display-p3 var(---poppy_color_brand_primary_gradual2));
---poppy_color_brand_primary_gradual2: 1 .282353 0;

}
}
.lazy-img,
.lazy-img-s {
display: block;
background: #f9f9f9 url(data:image/png;base64,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) center center no-repeat;
}

.lazy-img {
background-size: 2rem .69rem;
}

.lazy-img-s {
background-size: 80% auto;
}

.ping-title, .ping-em, .jia-title {
font-family: “PingFangSC-Medium”, “Droid Sans”, arial, “Helvetica Neue”, Helvetica, sans-serif;
}
.isandroid .fwb, .isandroid .ping-title, .isandroid .ping-em, .isandroid .jia-title {
font-weight: 700;
}

@font-face {
font-family: “DIN-Alternate-Bold”;
src: url(“../font/DIN-Alternate-Bold.ttf”);
src: url(“../font/DIN-Alternate-Bold.eot?#font-spider”) format(“embedded-opentype”), url(“../font/DIN-Alternate-Bold.woff”) format(“woff”), url(“../font/DIN-Alternate-Bold.ttf”) format(“truetype”), url(“../font/DIN-Alternate-Bold.svg”) format(“svg”);
}
.pec-btn-zone {
margin-top: .4rem;
margin-bottom: .2rem;
padding: 0 .3rem;
}
.pec-btn-zone button + button {
margin-left: .3rem;
}

.pec-fiexd-btn {
margin: 0;
padding: 0;
}
.pec-fiexd-btn button[size=”big”].pec-primary-btn {
border-radius: 0;
}

button.pec-primary-btn {
color: #fff;
background: #b38954;
}

button.pec-primary-btn:active {
background: #a67f4e !important;
}

button.pec-secondary-btn {
color: #b38954;
background: none;
border: 2px solid #b38954;
}

button.pec-secondary-btn:active {
color: themeColorActive !important;
border-color: themeColorActive !important;
}

button[size=”big”].pec-primary-btn,
button[size=”big”].pec-secondary-btn {
height: .9rem;
font-size: .32rem;
border-radius: .08rem;
}

.isandroid button.pec-secondary-btn {
border-width: 1px;
}

.pab-btn-placeholder {
width: 100%;
min-height: 1.12rem;
padding: 0;
}

.pab-btn-fixed {
position: fixed;
bottom: 0;
left: 0;
z-index: 400;
width: 100%;
}

.pingjia {
padding: 1.2rem .4rem 0 .4rem;
}

.ping {
padding: .4rem .32rem;
margin-bottom: .4rem;
border-radius: .16rem;
background: white;
background: var(–poppy_color_negative_level1);
}
.ping-title {
font-size: 0.36rem;
font-size: var(–poppy_fontsize_medium_xx);
color: black;
color: var(–poppy_color_positive_level1);
}
.ping-sub {
font-size: 0.28rem;
font-size: var(–poppy_fontsize_medium);
color: rgba(0, 0, 0, 0.6);
color: var(–poppy_color_positive_level3);
}
.ping-body {
padding: .32rem 0;
}
.ping-p {
font-size: 0.28rem;
font-size: var(–poppy_fontsize_medium);
color: rgba(0, 0, 0, 0.6);
color: var(–poppy_color_positive_level3);
}
.ping-p + .ping-p {
padding-top: .08rem;
}
.ping-left {
height: .64rem;
}
.ping-em {
color: #ff4800;
color: var(–poppy_color_brand_primary1);
}
.ping-edit {
margin-top: .4rem;
height: 1.44rem;
}
.ping-edit textarea {
width: 100%;
min-height: 1.44rem;
padding: .24rem .32rem;
border-radius: .16rem;
font-size: 0.28rem;
font-size: var(–poppy_fontsize_medium);
color: black;
color: var(–poppy_color_positive_level1);
background: rgba(0, 0, 0, 0.04);
background: var(–poppy_color_fg_line);
}
.ping .poppy-rate-item {
margin-right: .32rem;
}
.ping .poppy-rate-item__def {
width: .48rem;
height: .48rem;
}
.ping .poppy-rate-item__def.is-star {
font-size: 0.48rem;
font-size: var(–poppy_fontsize_large_x);
}

.poppy-rate-item.active .rate-item {
background-color: orange;
}

.jia {
margin-top: .2rem;
background: white;
background: var(–poppy_color_negative_level1);
}
.jia-one {
min-height: 1.12rem;
padding: 0 .08rem 0 .4rem;
}
.jia-sub {
font-size: 0.32rem;
font-size: var(–poppy_fontsize_medium_x);
color: rgba(0, 0, 0, 0.6);
color: var(–poppy_color_positive_level3);
}
.jia-right {
height: .48rem;
}
.jia .poppy-rate-item {
margin-right: .32rem;
}
.jia .poppy-rate-item__def {
width: .48rem;
height: .48rem;
}
.jia .poppy-rate-item__def.is-star {
font-size: 0.48rem;
font-size: var(–poppy_fontsize_large_x);
}
.jia-two {
position: relative;
padding: .48rem .4rem;
text-align: center;
}
.jia-close {
position: absolute;
right: .32rem;
top: .32rem;
width: .4rem;
height: .4rem;
}
.jia-title {
font-size: 0.36rem;
font-size: var(–poppy_fontsize_medium_xx);
color: black;
color: var(–poppy_color_positive_level1);
}
.jia-cen {
position: relative;
width: 100%;
height: .48rem;
margin: .32rem 0 .48rem 0;
}
.jia-edit {
height: 1.44rem;
}
.jia-edit textarea {
width: 100%;
min-height: 1.44rem;
padding: .24rem .32rem;
border-radius: .16rem;
font-size: 0.28rem;
font-size: var(–poppy_fontsize_medium);
color: black;
color: var(–poppy_color_positive_level1);
background: rgba(0, 0, 0, 0.04);
background: var(–poppy_color_fg_line);
}
.jia-btn {
width: 4.94rem;
height: .8rem;
margin: .48rem auto 0;
}
.jia .poppy-icon-close {
display: block;
width: .4rem;
height: .4rem;
}
.jia .poppy-icon-close:before {
display: block;
font-size: 0.38rem;
color: rgba(0, 0, 0, 0.4);
color: var(–poppy_color_positive_level4);
}
.jia .ping-sub {
position: absolute;
left: 5.2rem;
bottom: -.05rem;
}

.pab-nav-placeholder {
width: 100%;
height: .88rem;
}

.pab-nav-fixed {
position: fixed;
top: 0;
left: 0;
z-index: 300;
width: 100%;
}

.tab-fix {
position: fixed;
top: .88rem;
left: 0;
z-index: 300;
width: 100%;
height: .8rem;
}

.ping-foot-link {
margin-bottom: -.4rem;
min-height: .84rem;
}
.ping-foot-link .txt {
font-size: 0.24rem;
font-size: var(–poppy_fontsize_small);
color: #ff4800;
color: var(–poppy_color_brand_primary1);
}
.ping-foot-link .poppy-icon-arrow-right {
font-size: 0.32rem;
font-size: var(–poppy_fontsize_medium_x);
color: rgba(0, 0, 0, 0.2);
color: var(–poppy_color_positive_level5);
}

.evaluate {
margin-top: .2rem;
padding: .3rem;
background: #fff;
background: var(–poppy_color_white);
}
.evaluate-item {
width: 2.02rem;
height: .66rem;
margin-left: .1rem;
padding-bottom: .02rem;
font-size: 0;
text-align: center;
border-radius: .33rem;
border-width: 1px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.08);
border-color: color(display-p3 0 0 0/0.08);
}
.evaluate-item + .evaluate-item {
margin-left: .32rem;
}
.evaluate-item.curr {
background: #fff0dd;
background: color(display-p3 1 0.94118 0.86667/1);
border-width: 0;
}
.evaluate-box {
font-size: 0;
}
.evaluate-icon, .evaluate-txt {
display: inline-block;
margin: 0 .08rem;
vertical-align: middle;
}
.evaluate-icon {
height: .44rem;
width: .4rem;
border-radius: 100%;
}
.evaluate-satisfied {
background: url(../images/satisfied-no.png) center no-repeat;
background-size: 100% 100%;
}
.evaluate-ordinary {
background: url(../images/ordinary-no.png) center no-repeat;
background-size: 100% 100%;
}
.evaluate-dissati {
background: url(../images/dissati-no.png) center no-repeat;
background-size: 100% 100%;
}
.evaluate .curr .evaluate-satisfied {
background: url(../images/icon-satisfied.png) center no-repeat;
background-size: 100% 100%;
}
.evaluate .curr .evaluate-ordinary {
background: url(../images/icon-ordinary.png) center no-repeat;
background-size: 100% 100%;
}
.evaluate .curr .evaluate-dissati {
background: url(../images/icon-dissati.png) bottom no-repeat;
background-size: 100% .4rem;
}
.evaluate-txt {
margin-top: .02rem;
font-size: 0.28rem;
font-size: var(–poppy_fontsize_medium);
color: #333333;
color: color(display-p3 0.2 0.2 0.2/1);
}
.evaluate-edit {
min-height: 2.4rem;
margin-top: .3rem;
}
.evaluate-edit textarea {
width: 100%;
min-height: 2.4rem;
padding: .3rem;
border-radius: .16rem;
font-size: 0.28rem;
font-size: var(–poppy_fontsize_medium);
color: black;
color: var(–poppy_color_positive_level1);
background: #fafafa;
background: color(display-p3 0.98039 0.98039 0.98039/1);
}

.pec-btn-zone {
margin-top: .3rem;
margin-bottom: 0;
}

.pec-btn-zone-new {
padding: 0 .1rem;
}

.evaluate-fixed {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 500;
}

.foot-h {
height: 5.22rem;
width: 100%;
}

正文完
css
发表至： css
2021-08-03
 0
关于css:锯齿状背景图片
关于前端优化:前端进阶1Web前端性能优化
关于css:Chrome-开发者工具里的-CSS-grid-editor
关于css:positionfixed基于父元素定位