no message

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;
+  margin-top: 31px;
-  padding-bottom: 7px;
   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;
 }

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-right: 10px;
-            padding-bottom: 7px;
+            // 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%);
+            }
+        }
     }
 }
 

html/details.html

@@ -28,7 +28,7 @@
                 </div>
                 <div class="details flexflex">
                     <img class="logo" src="/img/details-icon.png" />
-                    <div class="right">
+                    <div class="right flex1">
                         <div class="name">{{ info.name_zh }}</div>
                         <div class="name-en">{{ info.name_en }}</div>
                         <div class="school flexacenter">
@@ -57,6 +57,18 @@
                             <div class="tag-item" v-for="item in info.tags">{{ item }}</div>
                         </div>
                     </div>
+
+                    <div class="QRCode flexcenter">
+                        <img class="triangle" src="/img/triangle-gray.svg" />
+                        <div class="code flexcenter">
+                            <img class="img" src="/img/img.svg" />
+                        </div>
+
+                        <div class="hint flexacenter">
+                            <img class="img" src="/img/scan-icon.png" />
+                            手机查看该项目
+                        </div>
+                    </div>
                 </div>
             </div>
 

img/triangle-gray.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="9px" height="16px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -1270 -335 )">
+    <path d="M 8.703125 7.296875  C 8.90104166666667 7.49479166666667  9 7.72916666666667  9 8  C 9 8.27083333333333  8.90104166666667 8.50520833333333  8.703125 8.703125  L 1.703125 15.703125  C 1.50520833333333 15.9010416666667  1.27083333333333 16  1 16  C 0.729166666666667 16  0.494791666666667 15.9010416666667  0.296875 15.703125  C 0.0989583333333333 15.5052083333333  0 15.2708333333333  0 15  L 0 1  C 0 0.729166666666664  0.0989583333333333 0.494791666666664  0.296875 0.296875  C 0.494791666666667 0.0989583333333321  0.729166666666667 0  1 0  C 1.27083333333333 0  1.50520833333333 0.0989583333333321  1.703125 0.296875  L 8.703125 7.296875  Z " fill-rule="nonzero" fill="#ebebeb" stroke="none" transform="matrix(1 0 0 1 1270 335 )" />
+  </g>
+</svg>