2 |
3 | # Apple Watch 信息
4 |
5 | > 数据来源： wikipedia
6 |
7 | ## 线上地址
8 | - iPhone: [http://kylebing.cn/tools/iphone](http://kylebing.cn/tools/iphone)
9 | - iPad: [http://kylebing.cn/tools/ipad](http://kylebing.cn/tools/ipad)
10 | - Apple Chip: [http://kylebing.cn/tools/apple-chip](http://kylebing.cn/tools/apple-chip)
11 | - AirPods: [http://kylebing.cn/tools/airpods](http://kylebing.cn/tools/airpods)
12 | - AppleWatch: [http://kylebing.cn/tools/apple-watch](http://kylebing.cn/tools/apple-watch)
13 |
14 |
15 | ## github 地址
16 | - iPhone: [https://github.com/KyleBing/iphone](https://github.com/KyleBing/iphone)
17 | - iPad: [https://github.com/KyleBing/ipad](https://github.com/KyleBing/ipad)
18 | - Apple Chip: [https://github.com/KyleBing/apple-chip](https://github.com/KyleBing/apple-chip)
19 | - AirPods: [https://github.com/KyleBing/airpods](https://github.com/KyleBing/airpods)
20 | - AppleWatch: [https://github.com/KyleBing/apple-watch](https://github.com/KyleBing/apple-watch)
21 |
22 |
23 | ## 预览
24 |
25 | 
26 |
27 |
28 |
29 | ## 修改说明
30 | 在每次修改 `css` 和 `js` 文件之后，很更新 `index.html` 中引入文件位置的后缀，以实现消除浏览器缓存的目的。
31 |
32 | ```html
33 |
34 |
35 | ```
36 |
--------------------------------------------------------------------------------
/scss/_reset.scss:
--------------------------------------------------------------------------------
1 |
2 | * {
3 | padding: 0;
4 | margin: 0;
5 | border: 0;
6 | font-family: inherit;
7 | -webkit-box-sizing: border-box;
8 | -moz-box-sizing: border-box;
9 | box-sizing: border-box;
10 | }
11 |
12 | body {
13 | width: 100%;
14 | margin: 0 auto;
15 | font-family: "PingFang SC", "Microsoft Yahei UI", "Microsoft Yahei", "Helvetica", sans-serif;
16 | }
17 |
18 | a {
19 | text-decoration: none;
20 | color: $text-main;
21 | }
22 |
23 | table {
24 | border-collapse: collapse;
25 | }
26 |
27 | input,
28 | textarea {
29 | //-webkit-appearance: none !important;
30 | }
31 |
32 | code,
33 | kbd,
34 | pre,
35 | samp,
36 | tt {
37 | font-family: "Courier New", Courier, monospace;
38 | }
39 |
40 | :focus,
41 | :active {
42 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
43 | outline: none;
44 | }
45 |
46 | ::-webkit-scrollbar {
47 | z-index: 50;
48 | width: 3px;
49 | height: 3px;
50 | }
51 |
52 | ::-webkit-scrollbar-track {
53 | border-bottom: 1px solid $bg-highlight;
54 | border-right: 1px solid $bg-highlight;
55 | background-color: rgba(0, 0, 0, 0);
56 | }
57 |
58 | ::-webkit-scrollbar-thumb {
59 | -webkit-border-radius: 5px;
60 | -moz-border-radius: 5px;
61 | border-radius: 5px;
62 | background-color: #eee;
63 | transition: all .2s;
64 | height: 3px;
65 | }
66 |
67 | :hover::-webkit-scrollbar-thumb {
68 | background-color: #dfdfdf;
69 | transition: all .2s;
70 | }
71 |
72 | ::-webkit-scrollbar-button {
73 | display: none;
74 | }
75 |
76 | ::-webkit-scrollbar-corner {
77 | display: none;
78 | }
79 |
--------------------------------------------------------------------------------
/scss/_utility.scss:
--------------------------------------------------------------------------------
1 | // box-shadow
2 | @mixin box-shadow($value){
3 | -webkit-box-shadow: $value;
4 | -moz-box-shadow: $value;
5 | box-shadow: $value;
6 | }
7 |
8 |
9 | // border-radius
10 | @mixin border-radius($corner...){
11 | -webkit-border-radius: $corner;
12 | -moz-border-radius: $corner;
13 | border-radius: $corner;
14 | }
15 |
16 | // unable to select
17 | @mixin unselectable(){
18 | -webkit-user-select: none;
19 | -moz-user-select: none;
20 | -ms-user-select: none;
21 | user-select: none;
22 | }
23 |
24 | @mixin clearfix(){
25 | &:after{
26 | content: '';
27 | display: block;
28 | clear: both;
29 | visibility: hidden;
30 | }
31 | }
32 |
33 | @mixin transform($value){
34 | -webkit-transform: $value;
35 | -moz-transform: $value;
36 | -ms-transform: $value;
37 | -o-transform: $value;
38 | transform: $value;
39 | }
40 |
41 |
42 | @mixin transition($value...){
43 | -webkit-transition: $value;
44 | -moz-transition: $value;
45 | -ms-transition: $value;
46 | -o-transition: $value;
47 | transition: $value;
48 | }
49 |
50 | @mixin animation($value){
51 | animation: $value;
52 | -webkit-animation: $value;
53 | }
54 |
55 |
56 |
57 | @mixin linear-gradient($direct, $colors){
58 | background: linear-gradient($direct, $colors);
59 | background: -webkit-linear-gradient($direct, $colors);
60 | background: -moz-linear-gradient($direct, $colors);
61 | }
62 |
63 | @mixin backdrop-filter($value){
64 | backdrop-filter: $value ;
65 | -webkit-backdrop-filter: $value;
66 | }
67 |
68 | // 1像素
69 | @mixin divider-1px(){
70 | content:'';
71 | height: 1px;
72 | display: block;
73 | width: 100%;
74 | position: absolute;
75 | background-color: $color-border;
76 | @include transform(scaleY(.5))
77 | }
78 |
79 |
80 |
--------------------------------------------------------------------------------
/scss/layout.scss:
--------------------------------------------------------------------------------
1 | .container{
2 | margin: 0 auto;
3 | max-width: 1920px;
4 | background-color: white;
5 | @media (max-width: 450px){
6 | body{
7 | background-color: $color-border;
8 | }
9 | .iphone{
10 | overflow: hidden;
11 | @include border-radius(15px);
12 | background-color: white;
13 | margin-bottom: 20px;
14 | padding: 0;
15 | border: 1px solid $color-border;
16 | }
17 | .title-content{
18 | border-bottom: none;
19 | border-bottom: 1px solid $color-border;
20 | background-color: white;
21 | padding: 15px;
22 | justify-content: center;
23 | .title{
24 | font-size: 1.5rem;
25 | font-weight: bold;
26 | }
27 | .slogan{
28 | display: none;
29 | }
30 | }
31 | .ref-content{
32 | padding: 15px;
33 | flex-flow: column nowrap;
34 | > *{
35 | margin-right: 0;
36 | border-bottom: 1px solid $color-border;
37 | &:last-child{
38 | border-bottom: none;
39 | }
40 | }
41 | }
42 | .main{
43 | padding-bottom: 20px;
44 | .image{
45 | padding: 0 20px;
46 | margin: 0;
47 | .img-frame{
48 | img{
49 | height: 100px;
50 | }
51 | }
52 | }
53 | .main-ref{
54 | padding: 0;
55 | &-item{
56 | margin-bottom: 10px;
57 | }
58 | }
59 | }
60 | .screen{
61 | padding: 20px;
62 | }
63 |
64 | .detail{
65 | width: 100%;
66 | overflow-x: auto;
67 | padding: 20px 0;
68 | flex-flow: column nowrap;
69 | &-list{
70 | margin-right: 0;
71 | width: 100%;
72 | }
73 | }
74 |
75 | background-color: transparent;
76 | }
77 | }
78 |
--------------------------------------------------------------------------------
/scss/_help.scss:
--------------------------------------------------------------------------------
1 | // HELP INFO
2 | .help-container{
3 | top: 0;
4 | left: 0;
5 | height: 100%;
6 | width: 100%;
7 | display: flex;
8 | justify-content: center;
9 | align-items: center;
10 | background-color: white;
11 | overflow-y: auto;
12 | position: fixed;
13 | z-index: 10000;
14 | }
15 |
16 | .help{
17 | width: 100%;
18 | flex-flow: column nowrap;
19 | display: flex;
20 | justify-content: center;
21 | align-items: center;
22 |
23 | }
24 |
25 | .help-header{
26 | border-bottom: 1px solid $color-border;
27 | h3{
28 | padding-bottom: 20px;
29 | width: 200px;
30 | text-align: center;
31 | font-size: $fz-huge;
32 | }
33 | }
34 |
35 | .help-body{
36 | display: flex;
37 | justify-content: center;
38 | padding: 30px;
39 | .qr-item{
40 | display: flex;
41 | justify-content: center;
42 | flex-flow: column nowrap;
43 | align-items: center;
44 | margin-right: 80px;
45 | &:last-child{
46 | margin-right: 0;
47 | }
48 | .img-container{
49 | margin-bottom: 20px;
50 | @include border-radius(10px);
51 | overflow: hidden;
52 | img {
53 | display: block;
54 | width: 150px;
55 | height: 150px;
56 | }
57 | }
58 | p{
59 | white-space: nowrap;
60 | text-overflow: ellipsis;
61 | overflow: hidden;
62 | font-size: $fz-sm;
63 | color: $text-subtitle;
64 | text-align: center;
65 | }
66 | }
67 | }
68 |
69 | .help-footer{
70 |
71 | }
72 | .operation-btn{
73 | cursor: pointer;
74 | padding: 8px 15px;
75 | @include border-radius(55px);
76 | background-color: $magenta;
77 | color: white;
78 | }
79 |
80 |
81 | @media (max-width: 768px){
82 | .help-body{
83 | align-items: center;
84 | justify-content: center;
85 | flex-flow: column nowrap;
86 | .qr-item{
87 | margin-right: 0;
88 | margin-bottom: 30px;
89 | &:last-child{
90 | margin-top: 0;
91 | }
92 | }
93 | }
94 | }
95 |
96 |
--------------------------------------------------------------------------------
/img/watch-info.svg:
--------------------------------------------------------------------------------
1 |
34 |
--------------------------------------------------------------------------------
/scss/_svg-image.scss:
--------------------------------------------------------------------------------
1 | $color-stroke: #333;
2 |
3 | .svg-screen {
4 | display: flex;
5 | width: 100%;
6 | justify-content: flex-start;
7 | margin-left: 60px;
8 | svg {
9 | margin-right: 45px;
10 | width: 106px;
11 | }
12 | }
13 |
14 | .svg-size {
15 | display: flex;
16 | justify-content: flex-start;
17 | width: 100%;
18 | margin-top: 20px;
19 | svg {
20 | width: 200px;
21 | }
22 | }
23 |
24 |
25 | .svg-screen {
26 | .cls-1 {
27 | fill: #fff;
28 | }
29 |
30 | .cls-2 {
31 | fill: #666;
32 | }
33 |
34 | .cls-3, .cls-9 {
35 | fill: none;
36 | }
37 |
38 | .cls-4 {
39 | fill: #e6e6e6;
40 | }
41 |
42 | .cls-5 {
43 | fill: #ccc;
44 | }
45 |
46 | .cls-6 {
47 | fill: #b3b3b3;
48 | }
49 |
50 | .cls-7 {
51 | fill: #999;
52 | }
53 |
54 | .cls-8 {
55 | fill: #f2f2f2;
56 | }
57 |
58 | .cls-9 {
59 | stroke: $color-stroke;
60 | stroke-miterlimit: 10;
61 | stroke-width: 0.5px;
62 | }
63 |
64 | .cls-10 {
65 | fill: #000000;
66 | }
67 |
68 | .cls-11 {
69 | font-size: 12px;
70 | font-family: Galvji;
71 | }
72 |
73 | .cls-12, .cls-13 {
74 | font-size: 10px;
75 | font-family: MicrosoftYaHeiUI,
76 | Microsoft YaHei UI;
77 | }
78 |
79 | .cls-13 {
80 | fill: #39b54a;
81 | }
82 |
83 | .cls-14 {
84 | letter-spacing: -0.11em;
85 | }
86 | }
87 |
88 | // =========================================
89 | .svg-size {
90 | display: flex;
91 | width: 100%;
92 | margin-bottom: 10px;
93 |
94 | &:last-child {
95 | margin-bottom: 0;
96 | }
97 |
98 |
99 |
100 | .cls-1 {
101 | fill: #e6e6e6;
102 | }
103 |
104 | .cls-2 {
105 | fill: #fff;
106 | }
107 |
108 | .cls-3 {
109 | fill: #666;
110 | }
111 |
112 | .cls-4 {
113 | fill: none;
114 | stroke: $color-stroke;
115 | stroke-miterlimit: 10;
116 | stroke-width: 0.5px;
117 | }
118 |
119 | .cls-5 {
120 | fill: #000000;
121 | }
122 |
123 | .cls-6 {
124 | fill: #fff;
125 | }
126 |
127 | .cls-7, .cls-9 {
128 | font-size: 12px;
129 | font-family: 'Galvji', sans-serif;
130 | }
131 |
132 | .cls-8 {
133 | font-size: 20px;
134 | }
135 |
136 | .cls-9 {
137 | fill: #39b54a;
138 | }
139 |
140 | }
141 |
--------------------------------------------------------------------------------
/scss/_variables.scss:
--------------------------------------------------------------------------------
1 | // Colors
2 | $green : #00b56b;
3 | $blue : #007AFF;
4 | $purple : #5856D6;
5 | $magenta : #FF2D70;
6 | $pink : #ff63d8;
7 | $red : #FF3B30;
8 | $orange : #FF9500;
9 | $yellow : #FFCC00;
10 | $gray : #8E8E93;
11 | $cyan: #04bbdc;
12 |
13 | $color-main: $magenta;
14 | $bg-highlight : #eeeeee;
15 | $font-size: 0.9rem;
16 |
17 | $color-border-about: #aaa;
18 | $color-border: #dadada;
19 | $color-border-title: #ccc;
20 | $use-shadow: false;
21 |
22 | $text-main: #404040;
23 | $text-second: #9e9e9e;
24 | $text-sup: #888;
25 | $text-value: #505257;
26 | $bg-storage: #505257;
27 |
28 | // label
29 | $label-corner: 15px;
30 | $label-transparent-rate: 0.2;
31 | $label-padding: 3px;
32 | $label-padding-lr: 8px;
33 | $label-font-size: 0.8rem;
34 | $label-font-size-sm: 0.7rem;
35 |
36 | $fz-huge : 36px;
37 | $fz-big : 24px;
38 | $fz-title: 25px;
39 | $fz-main : 14px;
40 | $fz-sm : 12px;
41 | $fz-tiny : 10px;
42 |
43 |
44 | $text-main : #333;
45 | $text-subtitle : #666;
46 | $text-comment : #999;
47 |
48 | .gradient{
49 | background-image: linear-gradient(to bottom right, #363d40, #6a7282);
50 | }
51 |
52 | .gradient-blue{
53 | color: white !important;
54 | background-image: linear-gradient(to bottom right, #618BFA, #1CB2F7);
55 | }
56 | .gradient-purple{
57 | color: white !important;
58 | background-image: linear-gradient(to bottom right, #C621FF, #FE3EBA);
59 | }
60 |
61 |
62 | $gradient-violet: #8876fe;
63 | $gradient-plum: #8d1287;
64 | $gradient-indigo: #622aff;
65 | $gradient-azure: #027fff;
66 | $gradient-tomato: #f63e54;
67 | $gradient-persimmon: #e94b1b;
68 | $gradient-pumpkin: #e2620c;
69 | $gradient-orange: #e66702;
70 | $gradient-green: #0c9d46;
71 | $gradient-sea-green: #099b9d;
72 | $gradient-teal: #049cb7;
73 | $gradient-aqua: #039e8f;
74 | $gradient-sapphire: #3d44c3;
75 | $gradient-ultramarine: #0d1387;
76 | $gradient-magenta: #dd04d1;
77 | $gradient-tangelo: #ff3e17;
78 | $gradient-cobalt: #5451fb;
79 |
80 |
81 | $gradient-bg-blue: linear-gradient(135deg,#1c7df3,#1abcfa);
82 | $gradient-bg-green: linear-gradient(135deg, $gradient-teal,#3dd9bd);
83 | $gradient-bg-purple: linear-gradient(135deg,#0D1387,#867AF6);
84 | $gradient-bg-red: linear-gradient(135deg,$gradient-tomato,$gradient-tangelo);
85 | $gradient-bg-body: linear-gradient(180deg,#e2e2e2,#e5e5e5);
86 |
--------------------------------------------------------------------------------
/scss/_label.scss:
--------------------------------------------------------------------------------
1 | // HEADER
2 | .section-header{
3 | padding: 5px 3px;
4 | display: flex;
5 | margin-bottom: 10px;
6 | align-items: flex-end;
7 | font-size: $fz-main + 2;
8 | .section-title{
9 | font-weight: bold;
10 | }
11 | .section-subtitle{
12 | font-family: 'Galvji', sans-serif;
13 | margin-left: 10px;
14 | color: $text-subtitle;
15 | }
16 | }
17 |
18 | // ITEM
19 | .sensor-info-item{
20 | @include border-radius(3px);
21 | padding: 3px 5px;
22 | display: flex;
23 | font-size: $fz-main;
24 | color: $text-main;
25 | .label{
26 | color: $text-subtitle;
27 | width: 100px;
28 | }
29 | .value{
30 | flex-grow: 1;
31 | &.value-inline{
32 | display: flex;
33 | justify-content: flex-start;
34 | align-items: center;
35 | }
36 | font-family: Galvji, sans-serif;
37 | .unit{
38 | color: $green;
39 | }
40 | }
41 | &:hover{
42 | background-color: $bg-highlight;
43 | .label{
44 |
45 | }
46 | }
47 | }
48 |
49 | .value-item-second{
50 | width: 100%;
51 | display: flex;
52 | font-size: $fz-main;
53 | align-items: flex-start;
54 | line-height: 20px;
55 | background-color: transparentize(black, 0.95);
56 | .label-second{
57 | width: 60px;
58 | font-weight: bold;
59 | }
60 | .value-second{
61 | flex-grow: 1;
62 |
63 | }
64 | }
65 |
66 |
67 | // 充电 ITEM
68 | $height-charging-bar: 24px;
69 | .charging-container{
70 | display: flex;
71 | flex-flow: column nowrap;
72 | }
73 | .charging-item {
74 | font-size: $fz-sm;
75 | margin-bottom: 5px;
76 | width: 200px;
77 | height: $height-charging-bar;
78 | color: white;
79 | font-family: Galvji, sans-serif;
80 | &:last-child{
81 | margin-bottom: 0;
82 | }
83 | .bar{
84 | position: relative;
85 | height: $height-charging-bar;
86 | .time{
87 | line-height: $height-charging-bar;
88 | right: 10px;
89 | position: absolute;
90 | }
91 | .percentage{
92 | left: 10px;
93 | line-height: $height-charging-bar;
94 | position: absolute;
95 | }
96 | }
97 | &.orange{
98 | .bar{
99 | border-color: $orange;
100 | background-color: transparentize($orange, 0.1);
101 | }
102 | }
103 | &.green{
104 | background-color: transparentize($green, 0.1);
105 | }
106 | }
107 |
108 | .tag{
109 | font-size: $fz-sm;
110 | margin-right: 5px;
111 | line-height: 1;
112 | background-color: white;
113 | border: 1px solid $color-border;
114 | padding: 2px 5px;
115 | @include border-radius(3px);
116 | }
117 |
--------------------------------------------------------------------------------
/img/screen-info.svg:
--------------------------------------------------------------------------------
1 |
48 |
--------------------------------------------------------------------------------
/scss/_about.scss:
--------------------------------------------------------------------------------
1 |
2 | // 关于
3 | .about{
4 | font-family: 'Galvji', sans-serif;
5 | color: white;
6 | display: flex;
7 | align-items: center;
8 | justify-content: space-between;
9 | font-size: 0.8rem;
10 | padding: 15px 35px;
11 | background-color: white;
12 | a{
13 | &:hover{
14 | text-decoration: underline;
15 | }
16 | color: white;
17 | }
18 | @media (max-width: 768px){
19 | align-items: stretch;
20 | padding: 35px 25px 25px;
21 | flex-flow: column nowrap;
22 | }
23 | }
24 |
25 | .about-header{
26 | display: flex;
27 | justify-content: space-between;
28 | .icon{
29 | display: flex;
30 | justify-content: center;
31 | align-items: center;
32 | padding-left: 30px;
33 | img{
34 | height: 50px;
35 | }
36 | }
37 | .content{
38 | flex-grow: 1;
39 | display: flex;
40 | flex-flow: row nowrap;
41 | margin-left: 30px;
42 | justify-content: flex-start;
43 | align-items: center;
44 | .title{
45 | font-size: $fz-title;
46 | }
47 | }
48 |
49 | @media (max-width: 768px){
50 | margin-bottom: 20px;
51 | .icon{
52 | display: none;
53 | }
54 | .content{
55 | flex-flow: column nowrap;
56 | margin-left: 0;
57 | .thumbs-up{
58 | padding: 15px 0;
59 | }
60 | .title{
61 | width: 100%;
62 | text-align: center;
63 | }
64 | }
65 | }
66 | }
67 | .copyright-group{
68 | display: flex;
69 | justify-content: space-between;
70 | @media (max-width: 768px){
71 | flex-flow: column nowrap;
72 | justify-content: center;
73 | align-items: center;
74 | }
75 | }
76 | .author-info{
77 | cursor: pointer;
78 | font-family: "Galvji";
79 | margin-left: 30px;
80 | padding: 10px 15px;
81 | justify-content: space-between;
82 | line-height: 1.4;
83 | font-size: 11px;
84 | letter-spacing: 0.5px;
85 | @include border-radius(5px);
86 | p{
87 | &:last-child{
88 | margin-bottom: 0;
89 | }
90 | }
91 | @media (max-width: 768px){
92 | padding: 15px 20px;
93 | @include border-radius(5px);
94 | background-color: rgba(255,255,255,0.05);
95 | border: none;
96 | margin: 0 0 10px;
97 | }
98 |
99 | .link{
100 | &:hover{
101 | color: white !important;
102 | }
103 | &:active{
104 | transform: translateY(2px);
105 | }
106 | }
107 | }
108 |
109 | .share-links{
110 | display: flex;
111 | justify-content: center;
112 | flex-flow: row nowrap;
113 | .link-item{
114 | width: 70px;
115 | display: flex;
116 | flex-flow: column nowrap;
117 | justify-content: center;
118 | align-items: center;
119 | @include border-radius(10px);
120 | img{
121 | display: block;
122 | height: 40px;
123 | }
124 | &[href]:hover{
125 | background-color: transparentize(black, 0.8);
126 | }
127 | }
128 | @media (max-width: 768px){
129 | .link-item{
130 | padding: 10px 0;
131 | }
132 | margin-bottom: 30px;
133 | }
134 | }
135 |
136 |
137 | .thumbs-up{
138 | width: 120px !important;
139 | display: flex;
140 | justify-content: center;
141 | align-items: center;
142 | flex-flow: row nowrap!important;
143 | @include transform(translateY(2px));
144 | cursor: pointer;
145 | img{
146 | height: 30px !important;
147 | }
148 | .multiply{
149 | padding: 0 4px;
150 | }
151 | h3{
152 | font-weight: normal;
153 | font-size: 12px;
154 | text-align: center;
155 | }
156 | }
157 |
158 | @media (max-width: 768px){
159 | .search-bar{
160 | display: none;
161 | }
162 | }
163 |
--------------------------------------------------------------------------------
/scss/AppleWatch.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 | @import "reset";
3 | @import "utility";
4 | @import "font";
5 | @import "gutter";
6 | @import "font";
7 | @import "about";
8 | @import "layout";
9 | @import "changelog";
10 | @import "filter-list";
11 | @import "help";
12 | @import "svg-image";
13 |
14 | body{
15 | background-color: $bg-highlight;
16 | font-family: "PingFang SC", "Microsoft Yahei UI", "Microsoft Yahei", "Helvetica", sans-serif;
17 | }
18 |
19 | .announcement{
20 | border-bottom: 1px solid $color-border;
21 | padding: 40px;
22 | width: 100%;
23 | text-align: center;
24 | a{
25 | color: $gray;
26 | &:hover{
27 | color: $color-main;
28 | }
29 | }
30 | }
31 |
32 | footer{
33 | padding: 10px 0 40px;
34 | font-size: 12px;
35 | text-align: center;
36 | color: $gray;
37 |
38 | }
39 |
40 | .apple-watch-list{
41 | margin: 0 auto;
42 | max-width: 1800px;
43 | padding: 30px 30px 50px 30px;
44 | @media (max-width: 768px){
45 | padding: 20px 10px;
46 | }
47 | }
48 |
49 | .apple-watch{
50 | padding: 80px 0;
51 | display: flex;
52 | flex-flow: row nowrap;
53 | justify-content: space-between;
54 | border-bottom: 1px solid $color-border;
55 | }
56 |
57 | // 主要信息
58 | section.main-info{
59 | margin-right: 30px;
60 | @include border-radius(20px);
61 | padding: 10px;
62 | background-color: white;
63 | flex-shrink: 0;
64 | width: 400px;
65 | display: flex;
66 | height: 100%;
67 | flex-flow: column nowrap;
68 | align-items: center;
69 | .main-pic{
70 | img{
71 | width: 300px;
72 | display: block;
73 | }
74 | }
75 |
76 | .title{
77 | font-family: 'Galvji', sans-serif;
78 | margin-top: 20px;
79 | font-weight: bold;
80 | font-size: $fz-title;
81 | &.is-new{
82 | -webkit-background-clip: text;
83 | background-clip: text;
84 | -webkit-text-fill-color: transparent;
85 | //background-image: linear-gradient(to top right, #ff31d1, #00ceff);
86 | background-image: linear-gradient(90deg,#2ca2b4,#5598de 24%,#7f87ff 45%,#f65aad 76%,#ec3d43);
87 | }
88 | }
89 | .date{
90 | margin-top: 5px;
91 | font-family: "Galvji";
92 | color: $text-subtitle;
93 | display: flex;
94 | justify-content: center;
95 | flex-flow: row nowrap;
96 | font-size: $fz-main + 3;
97 | }
98 | }
99 |
100 | // 主信息
101 | section.reference-info{
102 | flex-shrink: 0;
103 | flex-grow: 2;
104 | display: flex;
105 | flex-flow: column nowrap;
106 | align-items: flex-start;
107 | }
108 |
109 | // 传感器
110 | section.sensor-info{
111 | flex-shrink: 0;
112 | flex-grow: 1;
113 | }
114 |
115 | // 小尺寸
116 | section.size-small{
117 | flex-shrink: 0;
118 | flex-grow: 1;
119 | }
120 |
121 | // 大尺寸
122 | section.size-large{
123 | flex-shrink: 0;
124 | flex-grow: 1;
125 | }
126 |
127 | @media (max-width: 768px) {
128 | .apple-watch-list{
129 | padding: 0;
130 | }
131 | .apple-watch{
132 | padding: 0;
133 | flex-flow: column nowrap;
134 | }
135 | section{
136 | padding: 20px;
137 | width: 100%;
138 | &.main-info{
139 | width: 100%;
140 | .main-pic{
141 | img{
142 | width: 250px;
143 | }
144 | }
145 | .title {
146 | font-size: $fz-title - 3;
147 | &.is-new {
148 | }
149 | }
150 | .date{
151 | font-size: $fz-main;
152 | }
153 | }
154 | &.size-small{
155 | background-color: white;
156 | }
157 | &.size-large{
158 | background-color: white;
159 | }
160 | }
161 | }
162 |
163 |
164 | @import "label";
165 | @import "dark";
166 |
--------------------------------------------------------------------------------
/scss/_dark.scss:
--------------------------------------------------------------------------------
1 | $dark-bg: lighten(black, 15%);
2 | $dark-bg-highlight: lighten(black, 28%);
3 | $dark-bg-light: lighten(black, 24%);
4 |
5 |
6 | $dark-text: lighten(black, 65%);
7 | $dark-text-title: lighten(black, 75%);
8 | $dark-text-subtitle: lighten(black, 45%);
9 |
10 | $dark-border: lighten(black, 30%);
11 | $dark-border-light: lighten(black, 60%);
12 |
13 |
14 | @media (prefers-color-scheme: dark) {
15 | body{
16 | background-color: $dark-bg;
17 | }
18 | .container{
19 | background-color: $dark-bg;
20 | }
21 |
22 | .announcement{
23 | color: $dark-text;
24 | border-color: $dark-border;
25 | a{
26 | color: $gray;
27 | &:hover{
28 | color: $color-main;
29 | }
30 | }
31 | }
32 |
33 | // LABEL
34 | .rate{
35 | background-color: transparent !important;
36 | }
37 |
38 | .apple-watch{
39 | border-bottom-color: $dark-border;
40 | }
41 |
42 |
43 | .gradient-blue{
44 | color: darken(white, 15%) !important;
45 | background-image: linear-gradient(to bottom right, darken(#618BFA, 25%), darken(#1CB2F7, 25%));
46 | }
47 | .gradient-purple{
48 | color: darken(white, 15%) !important;
49 | background-image: linear-gradient(to bottom right, darken(#C621FF, 25%), darken(#FE3EBA, 25%));
50 | }
51 |
52 |
53 | // SVG
54 | rect{
55 | fill: transparent;
56 | &#apple-watch-outside{
57 | stroke: $dark-border-light;
58 | fill: $dark-bg
59 | }
60 | &#apple-watch-inside{
61 | stroke: $dark-border-light;
62 | fill: $dark-bg-highlight
63 | }
64 | &#apple-watch-inch{
65 | stroke: $dark-border-light;
66 | fill: $dark-bg-highlight
67 | }
68 | &#apple-watch-line{
69 | fill: $orange
70 | }
71 | }
72 | text, tspan{
73 | fill: $dark-text-title
74 | }
75 |
76 | .filter-list{
77 | .apple-watch-tag-list{
78 | .apple-watch-tag{
79 | border-color: $dark-border;
80 | color: $dark-text;
81 | background-color: $dark-bg;
82 | &:hover{
83 | background-color: $dark-bg-highlight;
84 | }
85 | &.active{
86 | }
87 | }
88 | }
89 | }
90 |
91 |
92 | // SCROLL BAR
93 | ::-webkit-scrollbar {
94 | z-index: 50;
95 | width: 8px;
96 | height: 10px;
97 | }
98 |
99 | ::-webkit-scrollbar-track {
100 | border: none;
101 | background-color: rgba(0, 0, 0, 0);
102 | }
103 |
104 | ::-webkit-scrollbar-thumb {
105 | border-color: transparent;
106 | background-color: transparent;
107 | }
108 |
109 | :hover::-webkit-scrollbar-thumb {
110 | //border: 1px solid $dark-border;
111 | background-color: $dark-bg-highlight;
112 | }
113 |
114 |
115 | // Labels
116 | // HEADER
117 | .section-header{
118 | .section-title{
119 | color: $dark-text-title;
120 | }
121 | .section-subtitle{
122 | color: $dark-text-subtitle;
123 | }
124 | }
125 |
126 | // ITEM
127 | .sensor-info-item{
128 | color: $dark-text-title;
129 | .label{
130 | color: $dark-text-subtitle;
131 | }
132 | .value{
133 | &.value-inline{
134 | }
135 | .unit{
136 | color: $green;
137 | }
138 | }
139 | &:hover{
140 | background-color: $dark-bg-highlight;
141 | .label{
142 |
143 | }
144 | }
145 | }
146 |
147 | .value-item-second{
148 | font-size: $fz-main;
149 | background-color: transparentize(white, 0.95);
150 | .label-second{
151 | }
152 | .value-second{
153 | }
154 | }
155 |
156 |
157 | // 充电 ITEM
158 | $height-charging-bar: 24px;
159 | .charging-container{
160 | }
161 | .charging-item {
162 | color: white;
163 | &:last-child{
164 | }
165 | .bar{
166 | .time{
167 | }
168 | .percentage{
169 | }
170 | }
171 | &.orange{
172 | .bar{
173 | border-color: $orange;
174 | background-color: transparentize($orange, 0.1);
175 | }
176 | }
177 | &.green{
178 | background-color: transparentize($green, 0.1);
179 | }
180 | }
181 |
182 | .tag{
183 | background-color: $dark-bg;
184 | border: 1px solid $dark-border;
185 | }
186 |
187 |
188 | .svg-size{
189 | .cls-6 {
190 | fill: transparent;
191 | }
192 | }
193 |
194 | }
195 |
--------------------------------------------------------------------------------
/scss/AppleWatch.css:
--------------------------------------------------------------------------------
1 | .gradient {
2 | background-image: linear-gradient(to bottom right, #363d40, #6a7282);
3 | }
4 |
5 | .gradient-blue {
6 | color: white !important;
7 | background-image: linear-gradient(to bottom right, #618BFA, #1CB2F7);
8 | }
9 |
10 | .gradient-purple {
11 | color: white !important;
12 | background-image: linear-gradient(to bottom right, #C621FF, #FE3EBA);
13 | }
14 |
15 | * {
16 | padding: 0;
17 | margin: 0;
18 | border: 0;
19 | font-family: inherit;
20 | -webkit-box-sizing: border-box;
21 | -moz-box-sizing: border-box;
22 | box-sizing: border-box;
23 | }
24 |
25 | body {
26 | width: 100%;
27 | margin: 0 auto;
28 | font-family: "PingFang SC", "Microsoft Yahei UI", "Microsoft Yahei", "Helvetica", sans-serif;
29 | }
30 |
31 | a {
32 | text-decoration: none;
33 | color: #333;
34 | }
35 |
36 | table {
37 | border-collapse: collapse;
38 | }
39 |
40 | code,
41 | kbd,
42 | pre,
43 | samp,
44 | tt {
45 | font-family: "Courier New", Courier, monospace;
46 | }
47 |
48 | :focus,
49 | :active {
50 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
51 | outline: none;
52 | }
53 |
54 | ::-webkit-scrollbar {
55 | z-index: 50;
56 | width: 3px;
57 | height: 3px;
58 | }
59 |
60 | ::-webkit-scrollbar-track {
61 | border-bottom: 1px solid #eeeeee;
62 | border-right: 1px solid #eeeeee;
63 | background-color: rgba(0, 0, 0, 0);
64 | }
65 |
66 | ::-webkit-scrollbar-thumb {
67 | -webkit-border-radius: 5px;
68 | -moz-border-radius: 5px;
69 | border-radius: 5px;
70 | background-color: #eee;
71 | transition: all 0.2s;
72 | height: 3px;
73 | }
74 |
75 | :hover::-webkit-scrollbar-thumb {
76 | background-color: #dfdfdf;
77 | transition: all 0.2s;
78 | }
79 |
80 | ::-webkit-scrollbar-button {
81 | display: none;
82 | }
83 |
84 | ::-webkit-scrollbar-corner {
85 | display: none;
86 | }
87 |
88 | @font-face {
89 | font-family: "Impact";
90 | src: url("../font/ImpactPureNumber.ttf");
91 | }
92 | @font-face {
93 | font-family: "LLPixel";
94 | src: url("../font/LLPixel_only_Letter.ttf");
95 | }
96 | @font-face {
97 | font-family: "Galvji";
98 | src: url("../font/Galvji.ttf");
99 | }
100 | .impact {
101 | font-family: "Impact", sans-serif !important;
102 | }
103 |
104 | .mt-1 {
105 | margin-top: 5px !important;
106 | }
107 |
108 | .mb-1 {
109 | margin-bottom: 5px !important;
110 | }
111 |
112 | .ml-1 {
113 | margin-left: 5px !important;
114 | }
115 |
116 | .mr-1 {
117 | margin-right: 5px !important;
118 | }
119 |
120 | .m-1 {
121 | margin: 5px !important;
122 | }
123 |
124 | .pt-1 {
125 | padding-top: 5px !important;
126 | }
127 |
128 | .pb-1 {
129 | padding-bottom: 5px !important;
130 | }
131 |
132 | .pl-1 {
133 | padding-left: 5px !important;
134 | }
135 |
136 | .pr-1 {
137 | padding-right: 5px !important;
138 | }
139 |
140 | .p-1 {
141 | padding: 5px !important;
142 | }
143 |
144 | .mt-2 {
145 | margin-top: 10px !important;
146 | }
147 |
148 | .mb-2 {
149 | margin-bottom: 10px !important;
150 | }
151 |
152 | .ml-2 {
153 | margin-left: 10px !important;
154 | }
155 |
156 | .mr-2 {
157 | margin-right: 10px !important;
158 | }
159 |
160 | .m-2 {
161 | margin: 10px !important;
162 | }
163 |
164 | .pt-2 {
165 | padding-top: 10px !important;
166 | }
167 |
168 | .pb-2 {
169 | padding-bottom: 10px !important;
170 | }
171 |
172 | .pl-2 {
173 | padding-left: 10px !important;
174 | }
175 |
176 | .pr-2 {
177 | padding-right: 10px !important;
178 | }
179 |
180 | .p-2 {
181 | padding: 10px !important;
182 | }
183 |
184 | .mt-3 {
185 | margin-top: 15px !important;
186 | }
187 |
188 | .mb-3 {
189 | margin-bottom: 15px !important;
190 | }
191 |
192 | .ml-3 {
193 | margin-left: 15px !important;
194 | }
195 |
196 | .mr-3 {
197 | margin-right: 15px !important;
198 | }
199 |
200 | .m-3 {
201 | margin: 15px !important;
202 | }
203 |
204 | .pt-3 {
205 | padding-top: 15px !important;
206 | }
207 |
208 | .pb-3 {
209 | padding-bottom: 15px !important;
210 | }
211 |
212 | .pl-3 {
213 | padding-left: 15px !important;
214 | }
215 |
216 | .pr-3 {
217 | padding-right: 15px !important;
218 | }
219 |
220 | .p-3 {
221 | padding: 15px !important;
222 | }
223 |
224 | .mt-4 {
225 | margin-top: 20px !important;
226 | }
227 |
228 | .mb-4 {
229 | margin-bottom: 20px !important;
230 | }
231 |
232 | .ml-4 {
233 | margin-left: 20px !important;
234 | }
235 |
236 | .mr-4 {
237 | margin-right: 20px !important;
238 | }
239 |
240 | .m-4 {
241 | margin: 20px !important;
242 | }
243 |
244 | .pt-4 {
245 | padding-top: 20px !important;
246 | }
247 |
248 | .pb-4 {
249 | padding-bottom: 20px !important;
250 | }
251 |
252 | .pl-4 {
253 | padding-left: 20px !important;
254 | }
255 |
256 | .pr-4 {
257 | padding-right: 20px !important;
258 | }
259 |
260 | .p-4 {
261 | padding: 20px !important;
262 | }
263 |
264 | .mt-5 {
265 | margin-top: 25px !important;
266 | }
267 |
268 | .mb-5 {
269 | margin-bottom: 25px !important;
270 | }
271 |
272 | .ml-5 {
273 | margin-left: 25px !important;
274 | }
275 |
276 | .mr-5 {
277 | margin-right: 25px !important;
278 | }
279 |
280 | .m-5 {
281 | margin: 25px !important;
282 | }
283 |
284 | .pt-5 {
285 | padding-top: 25px !important;
286 | }
287 |
288 | .pb-5 {
289 | padding-bottom: 25px !important;
290 | }
291 |
292 | .pl-5 {
293 | padding-left: 25px !important;
294 | }
295 |
296 | .pr-5 {
297 | padding-right: 25px !important;
298 | }
299 |
300 | .p-5 {
301 | padding: 25px !important;
302 | }
303 |
304 | .mt-6 {
305 | margin-top: 30px !important;
306 | }
307 |
308 | .mb-6 {
309 | margin-bottom: 30px !important;
310 | }
311 |
312 | .ml-6 {
313 | margin-left: 30px !important;
314 | }
315 |
316 | .mr-6 {
317 | margin-right: 30px !important;
318 | }
319 |
320 | .m-6 {
321 | margin: 30px !important;
322 | }
323 |
324 | .pt-6 {
325 | padding-top: 30px !important;
326 | }
327 |
328 | .pb-6 {
329 | padding-bottom: 30px !important;
330 | }
331 |
332 | .pl-6 {
333 | padding-left: 30px !important;
334 | }
335 |
336 | .pr-6 {
337 | padding-right: 30px !important;
338 | }
339 |
340 | .p-6 {
341 | padding: 30px !important;
342 | }
343 |
344 | .mt-7 {
345 | margin-top: 35px !important;
346 | }
347 |
348 | .mb-7 {
349 | margin-bottom: 35px !important;
350 | }
351 |
352 | .ml-7 {
353 | margin-left: 35px !important;
354 | }
355 |
356 | .mr-7 {
357 | margin-right: 35px !important;
358 | }
359 |
360 | .m-7 {
361 | margin: 35px !important;
362 | }
363 |
364 | .pt-7 {
365 | padding-top: 35px !important;
366 | }
367 |
368 | .pb-7 {
369 | padding-bottom: 35px !important;
370 | }
371 |
372 | .pl-7 {
373 | padding-left: 35px !important;
374 | }
375 |
376 | .pr-7 {
377 | padding-right: 35px !important;
378 | }
379 |
380 | .p-7 {
381 | padding: 35px !important;
382 | }
383 |
384 | @font-face {
385 | font-family: "Impact";
386 | src: url("../font/ImpactPureNumber.ttf");
387 | }
388 | @font-face {
389 | font-family: "LLPixel";
390 | src: url("../font/LLPixel_only_Letter.ttf");
391 | }
392 | @font-face {
393 | font-family: "Galvji";
394 | src: url("../font/Galvji.ttf");
395 | }
396 | .impact {
397 | font-family: "Impact", sans-serif !important;
398 | }
399 |
400 | .about {
401 | font-family: "Galvji", sans-serif;
402 | color: white;
403 | display: flex;
404 | align-items: center;
405 | justify-content: space-between;
406 | font-size: 0.8rem;
407 | padding: 15px 35px;
408 | background-color: white;
409 | }
410 | .about a {
411 | color: white;
412 | }
413 | .about a:hover {
414 | text-decoration: underline;
415 | }
416 | @media (max-width: 768px) {
417 | .about {
418 | align-items: stretch;
419 | padding: 35px 25px 25px;
420 | flex-flow: column nowrap;
421 | }
422 | }
423 |
424 | .about-header {
425 | display: flex;
426 | justify-content: space-between;
427 | }
428 | .about-header .icon {
429 | display: flex;
430 | justify-content: center;
431 | align-items: center;
432 | padding-left: 30px;
433 | }
434 | .about-header .icon img {
435 | height: 50px;
436 | }
437 | .about-header .content {
438 | flex-grow: 1;
439 | display: flex;
440 | flex-flow: row nowrap;
441 | margin-left: 30px;
442 | justify-content: flex-start;
443 | align-items: center;
444 | }
445 | .about-header .content .title {
446 | font-size: 25px;
447 | }
448 | @media (max-width: 768px) {
449 | .about-header {
450 | margin-bottom: 20px;
451 | }
452 | .about-header .icon {
453 | display: none;
454 | }
455 | .about-header .content {
456 | flex-flow: column nowrap;
457 | margin-left: 0;
458 | }
459 | .about-header .content .thumbs-up {
460 | padding: 15px 0;
461 | }
462 | .about-header .content .title {
463 | width: 100%;
464 | text-align: center;
465 | }
466 | }
467 |
468 | .copyright-group {
469 | display: flex;
470 | justify-content: space-between;
471 | }
472 | @media (max-width: 768px) {
473 | .copyright-group {
474 | flex-flow: column nowrap;
475 | justify-content: center;
476 | align-items: center;
477 | }
478 | }
479 |
480 | .author-info {
481 | cursor: pointer;
482 | font-family: "Galvji";
483 | margin-left: 30px;
484 | padding: 10px 15px;
485 | justify-content: space-between;
486 | line-height: 1.4;
487 | font-size: 11px;
488 | letter-spacing: 0.5px;
489 | -webkit-border-radius: 5px;
490 | -moz-border-radius: 5px;
491 | border-radius: 5px;
492 | }
493 | .author-info p:last-child {
494 | margin-bottom: 0;
495 | }
496 | @media (max-width: 768px) {
497 | .author-info {
498 | padding: 15px 20px;
499 | -webkit-border-radius: 5px;
500 | -moz-border-radius: 5px;
501 | border-radius: 5px;
502 | background-color: rgba(255, 255, 255, 0.05);
503 | border: none;
504 | margin: 0 0 10px;
505 | }
506 | }
507 | .author-info .link:hover {
508 | color: white !important;
509 | }
510 | .author-info .link:active {
511 | transform: translateY(2px);
512 | }
513 |
514 | .share-links {
515 | display: flex;
516 | justify-content: center;
517 | flex-flow: row nowrap;
518 | }
519 | .share-links .link-item {
520 | width: 70px;
521 | display: flex;
522 | flex-flow: column nowrap;
523 | justify-content: center;
524 | align-items: center;
525 | -webkit-border-radius: 10px;
526 | -moz-border-radius: 10px;
527 | border-radius: 10px;
528 | }
529 | .share-links .link-item img {
530 | display: block;
531 | height: 40px;
532 | }
533 | .share-links .link-item[href]:hover {
534 | background-color: rgba(0, 0, 0, 0.2);
535 | }
536 | @media (max-width: 768px) {
537 | .share-links {
538 | margin-bottom: 30px;
539 | }
540 | .share-links .link-item {
541 | padding: 10px 0;
542 | }
543 | }
544 |
545 | .thumbs-up {
546 | width: 120px !important;
547 | display: flex;
548 | justify-content: center;
549 | align-items: center;
550 | flex-flow: row nowrap !important;
551 | -webkit-transform: translateY(2px);
552 | -moz-transform: translateY(2px);
553 | -ms-transform: translateY(2px);
554 | -o-transform: translateY(2px);
555 | transform: translateY(2px);
556 | cursor: pointer;
557 | }
558 | .thumbs-up img {
559 | height: 30px !important;
560 | }
561 | .thumbs-up .multiply {
562 | padding: 0 4px;
563 | }
564 | .thumbs-up h3 {
565 | font-weight: normal;
566 | font-size: 12px;
567 | text-align: center;
568 | }
569 |
570 | @media (max-width: 768px) {
571 | .search-bar {
572 | display: none;
573 | }
574 | }
575 | .container {
576 | margin: 0 auto;
577 | max-width: 1920px;
578 | background-color: white;
579 | }
580 | @media (max-width: 450px) {
581 | .container {
582 | background-color: transparent;
583 | }
584 | .container body {
585 | background-color: #dadada;
586 | }
587 | .container .iphone {
588 | overflow: hidden;
589 | -webkit-border-radius: 15px;
590 | -moz-border-radius: 15px;
591 | border-radius: 15px;
592 | background-color: white;
593 | margin-bottom: 20px;
594 | padding: 0;
595 | border: 1px solid #dadada;
596 | }
597 | .container .title-content {
598 | border-bottom: none;
599 | border-bottom: 1px solid #dadada;
600 | background-color: white;
601 | padding: 15px;
602 | justify-content: center;
603 | }
604 | .container .title-content .title {
605 | font-size: 1.5rem;
606 | font-weight: bold;
607 | }
608 | .container .title-content .slogan {
609 | display: none;
610 | }
611 | .container .ref-content {
612 | padding: 15px;
613 | flex-flow: column nowrap;
614 | }
615 | .container .ref-content > * {
616 | margin-right: 0;
617 | border-bottom: 1px solid #dadada;
618 | }
619 | .container .ref-content > *:last-child {
620 | border-bottom: none;
621 | }
622 | .container .main {
623 | padding-bottom: 20px;
624 | }
625 | .container .main .image {
626 | padding: 0 20px;
627 | margin: 0;
628 | }
629 | .container .main .image .img-frame img {
630 | height: 100px;
631 | }
632 | .container .main .main-ref {
633 | padding: 0;
634 | }
635 | .container .main .main-ref-item {
636 | margin-bottom: 10px;
637 | }
638 | .container .screen {
639 | padding: 20px;
640 | }
641 | .container .detail {
642 | width: 100%;
643 | overflow-x: auto;
644 | padding: 20px 0;
645 | flex-flow: column nowrap;
646 | }
647 | .container .detail-list {
648 | margin-right: 0;
649 | width: 100%;
650 | }
651 | }
652 |
653 | .filter-list {
654 | padding: 10px 30px 5px;
655 | background-color: rgba(106, 114, 130, 0.1);
656 | display: flex;
657 | justify-content: center;
658 | }
659 | .filter-list .apple-watch-tag-list {
660 | -webkit-border-radius: 10px;
661 | -moz-border-radius: 10px;
662 | border-radius: 10px;
663 | max-width: 1440px;
664 | display: flex;
665 | justify-content: center;
666 | flex-flow: row wrap;
667 | padding: 10px;
668 | }
669 | .filter-list .apple-watch-tag-list .apple-watch-tag {
670 | border: 1px solid #dadada;
671 | font-family: "Galvji";
672 | background-color: white;
673 | white-space: nowrap;
674 | margin-bottom: 5px;
675 | font-size: 13px;
676 | cursor: pointer;
677 | padding: 3px 8px;
678 | margin-right: 5px;
679 | line-height: 1.3;
680 | -webkit-border-radius: 3px;
681 | -moz-border-radius: 3px;
682 | border-radius: 3px;
683 | color: #333;
684 | }
685 | .filter-list .apple-watch-tag-list .apple-watch-tag:hover {
686 | background-color: #eeeeee;
687 | }
688 | .filter-list .apple-watch-tag-list .apple-watch-tag.active {
689 | background-color: #6a7282;
690 | border-color: transparent;
691 | color: white;
692 | }
693 |
694 | @media (max-width: 768px) {
695 | .filter-list .apple-watch-tag-list .apple-watch-tag {
696 | font-size: 14px;
697 | padding: 5px 10px;
698 | -webkit-border-radius: 6px;
699 | -moz-border-radius: 6px;
700 | border-radius: 6px;
701 | }
702 | }
703 | .help-container {
704 | top: 0;
705 | left: 0;
706 | height: 100%;
707 | width: 100%;
708 | display: flex;
709 | justify-content: center;
710 | align-items: center;
711 | background-color: white;
712 | overflow-y: auto;
713 | position: fixed;
714 | z-index: 10000;
715 | }
716 |
717 | .help {
718 | width: 100%;
719 | flex-flow: column nowrap;
720 | display: flex;
721 | justify-content: center;
722 | align-items: center;
723 | }
724 |
725 | .help-header {
726 | border-bottom: 1px solid #dadada;
727 | }
728 | .help-header h3 {
729 | padding-bottom: 20px;
730 | width: 200px;
731 | text-align: center;
732 | font-size: 36px;
733 | }
734 |
735 | .help-body {
736 | display: flex;
737 | justify-content: center;
738 | padding: 30px;
739 | }
740 | .help-body .qr-item {
741 | display: flex;
742 | justify-content: center;
743 | flex-flow: column nowrap;
744 | align-items: center;
745 | margin-right: 80px;
746 | }
747 | .help-body .qr-item:last-child {
748 | margin-right: 0;
749 | }
750 | .help-body .qr-item .img-container {
751 | margin-bottom: 20px;
752 | -webkit-border-radius: 10px;
753 | -moz-border-radius: 10px;
754 | border-radius: 10px;
755 | overflow: hidden;
756 | }
757 | .help-body .qr-item .img-container img {
758 | display: block;
759 | width: 150px;
760 | height: 150px;
761 | }
762 | .help-body .qr-item p {
763 | white-space: nowrap;
764 | text-overflow: ellipsis;
765 | overflow: hidden;
766 | font-size: 12px;
767 | color: #666;
768 | text-align: center;
769 | }
770 |
771 | .operation-btn {
772 | cursor: pointer;
773 | padding: 8px 15px;
774 | -webkit-border-radius: 55px;
775 | -moz-border-radius: 55px;
776 | border-radius: 55px;
777 | background-color: #FF2D70;
778 | color: white;
779 | }
780 |
781 | @media (max-width: 768px) {
782 | .help-body {
783 | align-items: center;
784 | justify-content: center;
785 | flex-flow: column nowrap;
786 | }
787 | .help-body .qr-item {
788 | margin-right: 0;
789 | margin-bottom: 30px;
790 | }
791 | .help-body .qr-item:last-child {
792 | margin-top: 0;
793 | }
794 | }
795 | .svg-screen {
796 | display: flex;
797 | width: 100%;
798 | justify-content: flex-start;
799 | margin-left: 60px;
800 | }
801 | .svg-screen svg {
802 | margin-right: 45px;
803 | width: 106px;
804 | }
805 |
806 | .svg-size {
807 | display: flex;
808 | justify-content: flex-start;
809 | width: 100%;
810 | margin-top: 20px;
811 | }
812 | .svg-size svg {
813 | width: 200px;
814 | }
815 |
816 | .svg-screen .cls-1 {
817 | fill: #fff;
818 | }
819 | .svg-screen .cls-2 {
820 | fill: #666;
821 | }
822 | .svg-screen .cls-3, .svg-screen .cls-9 {
823 | fill: none;
824 | }
825 | .svg-screen .cls-4 {
826 | fill: #e6e6e6;
827 | }
828 | .svg-screen .cls-5 {
829 | fill: #ccc;
830 | }
831 | .svg-screen .cls-6 {
832 | fill: #b3b3b3;
833 | }
834 | .svg-screen .cls-7 {
835 | fill: #999;
836 | }
837 | .svg-screen .cls-8 {
838 | fill: #f2f2f2;
839 | }
840 | .svg-screen .cls-9 {
841 | stroke: #333;
842 | stroke-miterlimit: 10;
843 | stroke-width: 0.5px;
844 | }
845 | .svg-screen .cls-10 {
846 | fill: #000000;
847 | }
848 | .svg-screen .cls-11 {
849 | font-size: 12px;
850 | font-family: Galvji;
851 | }
852 | .svg-screen .cls-12, .svg-screen .cls-13 {
853 | font-size: 10px;
854 | font-family: MicrosoftYaHeiUI, Microsoft YaHei UI;
855 | }
856 | .svg-screen .cls-13 {
857 | fill: #39b54a;
858 | }
859 | .svg-screen .cls-14 {
860 | letter-spacing: -0.11em;
861 | }
862 |
863 | .svg-size {
864 | display: flex;
865 | width: 100%;
866 | margin-bottom: 10px;
867 | }
868 | .svg-size:last-child {
869 | margin-bottom: 0;
870 | }
871 | .svg-size .cls-1 {
872 | fill: #e6e6e6;
873 | }
874 | .svg-size .cls-2 {
875 | fill: #fff;
876 | }
877 | .svg-size .cls-3 {
878 | fill: #666;
879 | }
880 | .svg-size .cls-4 {
881 | fill: none;
882 | stroke: #333;
883 | stroke-miterlimit: 10;
884 | stroke-width: 0.5px;
885 | }
886 | .svg-size .cls-5 {
887 | fill: #000000;
888 | }
889 | .svg-size .cls-6 {
890 | fill: #fff;
891 | }
892 | .svg-size .cls-7, .svg-size .cls-9 {
893 | font-size: 12px;
894 | font-family: "Galvji", sans-serif;
895 | }
896 | .svg-size .cls-8 {
897 | font-size: 20px;
898 | }
899 | .svg-size .cls-9 {
900 | fill: #39b54a;
901 | }
902 |
903 | body {
904 | background-color: #eeeeee;
905 | font-family: "PingFang SC", "Microsoft Yahei UI", "Microsoft Yahei", "Helvetica", sans-serif;
906 | }
907 |
908 | .announcement {
909 | border-bottom: 1px solid #dadada;
910 | padding: 40px;
911 | width: 100%;
912 | text-align: center;
913 | }
914 | .announcement a {
915 | color: #8E8E93;
916 | }
917 | .announcement a:hover {
918 | color: #FF2D70;
919 | }
920 |
921 | footer {
922 | padding: 10px 0 40px;
923 | font-size: 12px;
924 | text-align: center;
925 | color: #8E8E93;
926 | }
927 |
928 | .apple-watch-list {
929 | margin: 0 auto;
930 | max-width: 1800px;
931 | padding: 30px 30px 50px 30px;
932 | }
933 | @media (max-width: 768px) {
934 | .apple-watch-list {
935 | padding: 20px 10px;
936 | }
937 | }
938 |
939 | .apple-watch {
940 | padding: 80px 0;
941 | display: flex;
942 | flex-flow: row nowrap;
943 | justify-content: space-between;
944 | border-bottom: 1px solid #dadada;
945 | }
946 |
947 | section.main-info {
948 | margin-right: 30px;
949 | -webkit-border-radius: 20px;
950 | -moz-border-radius: 20px;
951 | border-radius: 20px;
952 | padding: 10px;
953 | background-color: white;
954 | flex-shrink: 0;
955 | width: 400px;
956 | display: flex;
957 | height: 100%;
958 | flex-flow: column nowrap;
959 | align-items: center;
960 | }
961 | section.main-info .main-pic img {
962 | width: 300px;
963 | display: block;
964 | }
965 | section.main-info .title {
966 | font-family: "Galvji", sans-serif;
967 | margin-top: 20px;
968 | font-weight: bold;
969 | font-size: 25px;
970 | }
971 | section.main-info .title.is-new {
972 | -webkit-background-clip: text;
973 | background-clip: text;
974 | -webkit-text-fill-color: transparent;
975 | background-image: linear-gradient(90deg, #2ca2b4, #5598de 24%, #7f87ff 45%, #f65aad 76%, #ec3d43);
976 | }
977 | section.main-info .date {
978 | margin-top: 5px;
979 | font-family: "Galvji";
980 | color: #666;
981 | display: flex;
982 | justify-content: center;
983 | flex-flow: row nowrap;
984 | font-size: 17px;
985 | }
986 |
987 | section.reference-info {
988 | flex-shrink: 0;
989 | flex-grow: 2;
990 | display: flex;
991 | flex-flow: column nowrap;
992 | align-items: flex-start;
993 | }
994 |
995 | section.sensor-info {
996 | flex-shrink: 0;
997 | flex-grow: 1;
998 | }
999 |
1000 | section.size-small {
1001 | flex-shrink: 0;
1002 | flex-grow: 1;
1003 | }
1004 |
1005 | section.size-large {
1006 | flex-shrink: 0;
1007 | flex-grow: 1;
1008 | }
1009 |
1010 | @media (max-width: 768px) {
1011 | .apple-watch-list {
1012 | padding: 0;
1013 | }
1014 |
1015 | .apple-watch {
1016 | padding: 0;
1017 | flex-flow: column nowrap;
1018 | }
1019 |
1020 | section {
1021 | padding: 20px;
1022 | width: 100%;
1023 | }
1024 | section.main-info {
1025 | width: 100%;
1026 | }
1027 | section.main-info .main-pic img {
1028 | width: 250px;
1029 | }
1030 | section.main-info .title {
1031 | font-size: 22px;
1032 | }
1033 | section.main-info .date {
1034 | font-size: 14px;
1035 | }
1036 | section.size-small {
1037 | background-color: white;
1038 | }
1039 | section.size-large {
1040 | background-color: white;
1041 | }
1042 | }
1043 | .section-header {
1044 | padding: 5px 3px;
1045 | display: flex;
1046 | margin-bottom: 10px;
1047 | align-items: flex-end;
1048 | font-size: 16px;
1049 | }
1050 | .section-header .section-title {
1051 | font-weight: bold;
1052 | }
1053 | .section-header .section-subtitle {
1054 | font-family: "Galvji", sans-serif;
1055 | margin-left: 10px;
1056 | color: #666;
1057 | }
1058 |
1059 | .sensor-info-item {
1060 | -webkit-border-radius: 3px;
1061 | -moz-border-radius: 3px;
1062 | border-radius: 3px;
1063 | padding: 3px 5px;
1064 | display: flex;
1065 | font-size: 14px;
1066 | color: #333;
1067 | }
1068 | .sensor-info-item .label {
1069 | color: #666;
1070 | width: 100px;
1071 | }
1072 | .sensor-info-item .value {
1073 | flex-grow: 1;
1074 | font-family: Galvji, sans-serif;
1075 | }
1076 | .sensor-info-item .value.value-inline {
1077 | display: flex;
1078 | justify-content: flex-start;
1079 | align-items: center;
1080 | }
1081 | .sensor-info-item .value .unit {
1082 | color: #00b56b;
1083 | }
1084 | .sensor-info-item:hover {
1085 | background-color: #eeeeee;
1086 | }
1087 | .value-item-second {
1088 | width: 100%;
1089 | display: flex;
1090 | font-size: 14px;
1091 | align-items: flex-start;
1092 | line-height: 20px;
1093 | background-color: rgba(0, 0, 0, 0.05);
1094 | }
1095 | .value-item-second .label-second {
1096 | width: 60px;
1097 | font-weight: bold;
1098 | }
1099 | .value-item-second .value-second {
1100 | flex-grow: 1;
1101 | }
1102 |
1103 | .charging-container {
1104 | display: flex;
1105 | flex-flow: column nowrap;
1106 | }
1107 |
1108 | .charging-item {
1109 | font-size: 12px;
1110 | margin-bottom: 5px;
1111 | width: 200px;
1112 | height: 24px;
1113 | color: white;
1114 | font-family: Galvji, sans-serif;
1115 | }
1116 | .charging-item:last-child {
1117 | margin-bottom: 0;
1118 | }
1119 | .charging-item .bar {
1120 | position: relative;
1121 | height: 24px;
1122 | }
1123 | .charging-item .bar .time {
1124 | line-height: 24px;
1125 | right: 10px;
1126 | position: absolute;
1127 | }
1128 | .charging-item .bar .percentage {
1129 | left: 10px;
1130 | line-height: 24px;
1131 | position: absolute;
1132 | }
1133 | .charging-item.orange .bar {
1134 | border-color: #FF9500;
1135 | background-color: rgba(255, 149, 0, 0.9);
1136 | }
1137 | .charging-item.green {
1138 | background-color: rgba(0, 181, 107, 0.9);
1139 | }
1140 |
1141 | .tag {
1142 | font-size: 12px;
1143 | margin-right: 5px;
1144 | line-height: 1;
1145 | background-color: white;
1146 | border: 1px solid #dadada;
1147 | padding: 2px 5px;
1148 | -webkit-border-radius: 3px;
1149 | -moz-border-radius: 3px;
1150 | border-radius: 3px;
1151 | }
1152 |
1153 | @media (prefers-color-scheme: dark) {
1154 | body {
1155 | background-color: #262626;
1156 | }
1157 |
1158 | .container {
1159 | background-color: #262626;
1160 | }
1161 |
1162 | .announcement {
1163 | color: #a6a6a6;
1164 | border-color: #4d4d4d;
1165 | }
1166 | .announcement a {
1167 | color: #8E8E93;
1168 | }
1169 | .announcement a:hover {
1170 | color: #FF2D70;
1171 | }
1172 |
1173 | .rate {
1174 | background-color: transparent !important;
1175 | }
1176 |
1177 | .apple-watch {
1178 | border-bottom-color: #4d4d4d;
1179 | }
1180 |
1181 | .gradient-blue {
1182 | color: #d9d9d9 !important;
1183 | background-image: linear-gradient(to bottom right, #073fd5, #05638e);
1184 | }
1185 |
1186 | .gradient-purple {
1187 | color: #d9d9d9 !important;
1188 | background-image: linear-gradient(to bottom right, #7700a1, #bc0179);
1189 | }
1190 |
1191 | rect {
1192 | fill: transparent;
1193 | }
1194 | rect#apple-watch-outside {
1195 | stroke: #999999;
1196 | fill: #262626;
1197 | }
1198 | rect#apple-watch-inside {
1199 | stroke: #999999;
1200 | fill: #474747;
1201 | }
1202 | rect#apple-watch-inch {
1203 | stroke: #999999;
1204 | fill: #474747;
1205 | }
1206 | rect#apple-watch-line {
1207 | fill: #FF9500;
1208 | }
1209 |
1210 | text, tspan {
1211 | fill: #bfbfbf;
1212 | }
1213 |
1214 | .filter-list .apple-watch-tag-list .apple-watch-tag {
1215 | border-color: #4d4d4d;
1216 | color: #a6a6a6;
1217 | background-color: #262626;
1218 | }
1219 | .filter-list .apple-watch-tag-list .apple-watch-tag:hover {
1220 | background-color: #474747;
1221 | }
1222 | ::-webkit-scrollbar {
1223 | z-index: 50;
1224 | width: 8px;
1225 | height: 10px;
1226 | }
1227 |
1228 | ::-webkit-scrollbar-track {
1229 | border: none;
1230 | background-color: rgba(0, 0, 0, 0);
1231 | }
1232 |
1233 | ::-webkit-scrollbar-thumb {
1234 | border-color: transparent;
1235 | background-color: transparent;
1236 | }
1237 |
1238 | :hover::-webkit-scrollbar-thumb {
1239 | background-color: #474747;
1240 | }
1241 |
1242 | .section-header .section-title {
1243 | color: #bfbfbf;
1244 | }
1245 | .section-header .section-subtitle {
1246 | color: #737373;
1247 | }
1248 |
1249 | .sensor-info-item {
1250 | color: #bfbfbf;
1251 | }
1252 | .sensor-info-item .label {
1253 | color: #737373;
1254 | }
1255 | .sensor-info-item .value .unit {
1256 | color: #00b56b;
1257 | }
1258 | .sensor-info-item:hover {
1259 | background-color: #474747;
1260 | }
1261 | .value-item-second {
1262 | font-size: 14px;
1263 | background-color: rgba(255, 255, 255, 0.05);
1264 | }
1265 | .charging-item {
1266 | color: white;
1267 | }
1268 | .charging-item.orange .bar {
1269 | border-color: #FF9500;
1270 | background-color: rgba(255, 149, 0, 0.9);
1271 | }
1272 | .charging-item.green {
1273 | background-color: rgba(0, 181, 107, 0.9);
1274 | }
1275 |
1276 | .tag {
1277 | background-color: #262626;
1278 | border: 1px solid #4d4d4d;
1279 | }
1280 |
1281 | .svg-size .cls-6 {
1282 | fill: transparent;
1283 | }
1284 | }
1285 |
1286 | /*# sourceMappingURL=AppleWatch.css.map */
1287 |
--------------------------------------------------------------------------------
/js/qr.js:
--------------------------------------------------------------------------------
1 | /* qr.js -- QR code generator in Javascript (revision 2011-01-19)
2 | * Written by Kang Seonghoon | '); 727 | } 728 | html.push(' |
35 | 
40 | 
41 | ×
42 |当前页
534 |QQ群
540 |
34 | 
51 | 
54 | 
57 | 
60 | 
63 |