diff --git a/css/details.css b/css/details.css
index 2c42e4b..ab0e60e 100644
--- a/css/details.css
+++ b/css/details.css
@@ -41,18 +41,21 @@
color: #000000;
}
.boxbox .details {
- padding: 31px 60px;
+ padding: 0 0 0 60px;
}
.boxbox .details .logo {
width: 120px;
height: 120px;
position: relative;
z-index: 1;
- padding-right: 10px;
- padding-bottom: 7px;
+ margin-top: 31px;
margin-right: 39px;
display: inline-flex;
}
+.boxbox .details .right {
+ padding-top: 31px;
+ padding-bottom: 31px;
+}
.boxbox .details .right .name {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
@@ -96,6 +99,42 @@
margin-right: 6px;
margin-bottom: 8px;
}
+.boxbox .details .QRCode {
+ position: relative;
+ width: 290px;
+ border-left: 1px dotted #ebebeb;
+ flex-direction: column;
+}
+.boxbox .details .QRCode .code {
+ width: 120px;
+ height: 120px;
+ background-color: #ffffff;
+ border-radius: 60px;
+ box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.07058824);
+ margin-bottom: 12px;
+}
+.boxbox .details .QRCode .code .img {
+ width: 100px;
+ height: 100px;
+}
+.boxbox .details .QRCode .hint {
+ font-size: 13px;
+ letter-spacing: normal;
+ color: #333333;
+}
+.boxbox .details .QRCode .hint .img {
+ width: 12px;
+ height: 12px;
+ margin-right: 7px;
+}
+.boxbox .details .QRCode .triangle {
+ width: 9px;
+ height: 16px;
+ position: absolute;
+ top: 50%;
+ left: 0;
+ transform: translateY(-50%);
+}
.body {
align-items: flex-start;
}
diff --git a/css/details.less b/css/details.less
index 6e94bd7..4031132 100644
--- a/css/details.less
+++ b/css/details.less
@@ -42,19 +42,23 @@
}
}
.details {
- padding: 31px 60px;
+ padding: 0 0 0 60px;
.logo {
+
width: 120px;
height: 120px;
position: relative;
z-index: 1;
- padding-right: 10px;
- padding-bottom: 7px;
+ // padding-right: 10px;
+ // padding-bottom: 7px;
+ margin-top: 31px;
margin-right: 39px;
display: inline-flex;
}
.right {
+ padding-top: 31px;
+ padding-bottom: 31px;
.name {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
@@ -105,6 +109,43 @@
color: #7f7f7f;
}
}
+
+ .QRCode {
+ position: relative;
+ width: 290px;
+ border-left: 1px dotted #ebebeb;
+ flex-direction: column;
+ .code {
+ width: 120px;
+ height: 120px;
+ background-color: rgba(255, 255, 255, 1);
+ border-radius: 60px;
+ box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.0705882352941176);
+ margin-bottom: 12px;
+ .img {
+ width: 100px;
+ height: 100px;
+ }
+ }
+ .hint {
+ font-size: 13px;
+ letter-spacing: normal;
+ color: #333333;
+ .img {
+ width: 12px;
+ height: 12px;
+ margin-right: 7px;
+ }
+ }
+ .triangle {
+ width: 9px;
+ height: 16px;
+ position: absolute;
+ top: 50%;
+ left: 0;
+ transform: translateY(-50%);
+ }
+ }
}
}
diff --git a/html/details.html b/html/details.html
index 9adf491..8cce054 100644
--- a/html/details.html
+++ b/html/details.html
@@ -28,7 +28,7 @@
-
+
{{ info.name_zh }}
{{ info.name_en }}
@@ -57,6 +57,18 @@
{{ item }}
+
+
+
+
+
+
+
+
+
+ 手机查看该项目
+
+
diff --git a/img/img.svg b/img/img.svg
new file mode 100644
index 0000000..e77d139
--- /dev/null
+++ b/img/img.svg
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/img/scan-icon.png b/img/scan-icon.png
new file mode 100644
index 0000000..f72331d
Binary files /dev/null and b/img/scan-icon.png differ
diff --git a/img/triangle-gray.svg b/img/triangle-gray.svg
new file mode 100644
index 0000000..0f4a6c1
--- /dev/null
+++ b/img/triangle-gray.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
\ No newline at end of file
- 
+ 
+ 
+ 手机查看该项目
+