Merge pull request didi#781 from auroraXiaox/dev

fix(site): 修改首页设计模块兼容性问题

site/docs/design/preface/introduce.en-US.md

@@ -17,7 +17,7 @@ title: FD+ introduce
 We pursue minimalist and warm design, but we are more concerned about the value presentation of design in financial business, an important part of which is how to improve the efficiency of production collaboration.
 With the expansion of Didi’s financial business line, the product lines are very different in form, with many branches and complex models. In the collaborative construction of design and R&D, sorting out and extracting stable and highly usable controls, components and pages has become a Our shared goal. We hope that through componentized solutions, standards can be quickly aligned, production costs can be reduced, and designers can better focus on the growth and innovative design experience beyond efficiency.
 
-<strong class="work-show">2022 Didi Financial Design Team Work Show</strong><a href="https://z.didi.cn/5mqnc" target="_blank">See</a>
+<strong class="work-show">2021 Didi Financial Design Team Work Show</strong><a href="https://z.didi.cn/5mqnc" target="_blank">See</a>
 
 <img class="fd-team" src="https://pt-starimg.didistatic.com/static/starimg/img/4PJN8s5DLq1643105615244.png" alt="FD+ team" width="943"/>
 

site/docs/design/preface/viewpoint.en-US.md

@@ -12,60 +12,69 @@ title: Design values
 
 @media (max-width:750px) {
   .viewpoint-item {
-    width: 80%;
+    width: 77%;
     height: auto;
     padding: 20px 40px;
   }
   .viewpoint-intro {
     height: auto;
   }
+  .viewpoint-item-icon {
+    margin-right: 15px
+  }
+  .viewpoint-intro-text {
+    line-height: 24px
+  }
+  .doc-content-paragraph p{
+    margin-bottom: 0px!important
+  }
 }
 </style>
 
 <div class="viewpoint-container">
   <div class="viewpoint-item">
     <div class="viewpoint-item-icon">
-      <img src="https://pt-starimg.didistatic.com/static/starimg/img/jf5GM02nlq1643021725360.png" />
+      <img src="https://pt-starimg.didistatic.com/static/starimg/img/9DWaGIdBMX1643190639714.png" />
     </div>
     <div class="viewpoint-intro">
       <div class="viewpoint-intro-title">The target</div>
-      <div class="viewpoint-intro-text">To become an experience designer deeply integrated and bound with the business, and effectively help the business realize data growth and experience jump by maximizing the design value.</div>
+      <p class="viewpoint-intro-text">To become an experience designer deeply integrated and bound with the business, and effectively help the business realize data growth and experience jump by maximizing the design value.</p>
     </div>
   </div>
   <div class="viewpoint-item">
     <div class="viewpoint-item-icon">
-      <img src="https://pt-starimg.didistatic.com/static/starimg/img/sitVvkW1vH1643021728193.png" />
+      <img src="https://pt-starimg.didistatic.com/static/starimg/img/gmiERfISUE1643190639730.png" />
     </div>
     <div class="viewpoint-intro">
       <div class="viewpoint-intro-title">To promote</div>
-      <div class="viewpoint-intro-text">I have a sense of ownership, responsibility and responsibility, and regard business and team affairs as my own business.</div>
+      <p class="viewpoint-intro-text">I have a sense of ownership, responsibility and responsibility, and regard business and team affairs as my own business.</p>
     </div>
   </div>
   <div class="viewpoint-item">
     <div class="viewpoint-item-icon">
-      <img src="https://pt-starimg.didistatic.com/static/starimg/img/FJ33XWWsCR1643021733624.png" />
+      <img src="https://pt-starimg.didistatic.com/static/starimg/img/dXT7QFSA3Q1643190639878.png" />
     </div>
     <div class="viewpoint-intro">
       <div class="viewpoint-intro-title">advocate</div>
-      <div class="viewpoint-intro-text">Breaking boundary awareness, deep integration, proactive step forward, efficient collaboration.</div>
+      <p class="viewpoint-intro-text">Breaking boundary awareness, deep integration, proactive step forward, efficient collaboration.</p>
     </div>
   </div>
   <div class="viewpoint-item">
     <div class="viewpoint-item-icon">
-      <img src="https://pt-starimg.didistatic.com/static/starimg/img/FLxWpW4vkb1643021736278.png" />
+      <img src="https://pt-starimg.didistatic.com/static/starimg/img/Hf0EGJR9sc1643190639890.png" />
     </div>
     <div class="viewpoint-intro">
       <div class="viewpoint-intro-title">claim</div>
-      <div class="viewpoint-intro-text">Have the right values, in the face of conflict, deal with the situation as it is, and actively solve.</div>
+      <p class="viewpoint-intro-text">Have the right values, in the face of conflict, deal with the situation as it is, and actively solve.</p>
     </div>
   </div>
   <div class="viewpoint-item">
     <div class="viewpoint-item-icon">
-      <img src="https://pt-starimg.didistatic.com/static/starimg/img/Q1pvoifLXw1643021739320.png" />
+      <img src="https://pt-starimg.didistatic.com/static/starimg/img/QUoX8r0bBp1643190640044.png" />
     </div>
     <div class="viewpoint-intro">
       <div class="viewpoint-intro-title">boycott</div>
-      <div class="viewpoint-intro-text">Passing the buck, taking sides, spreading negative information among the team.</div>
+      <p class="viewpoint-intro-text">Passing the buck, taking sides, spreading negative information among the team.</p>
     </div>
   </div>
 </div>

site/docs/design/preface/viewpoint.md

@@ -12,13 +12,22 @@ title: 设计价值观
 
 @media (max-width:750px) {
   .viewpoint-item {
-    width: 80%;
+    width: 77%;
     height: auto;
     padding: 20px 40px;
   }
   .viewpoint-intro {
     height: auto;
   }
+  .viewpoint-item-icon {
+    margin-right: 15px
+  }
+  .viewpoint-intro-text {
+    line-height: 24px
+  }
+  .doc-content-paragraph p{
+    margin-bottom: 0px!important
+  }
 }
 </style>
 
@@ -29,7 +38,7 @@ title: 设计价值观
     </div>
     <div class="viewpoint-intro">
       <div class="viewpoint-intro-title">目标</div>
-      <div class="viewpoint-intro-text">成为与业务深度融合和绑定，通过设计价值的最大化有效帮助业务实现数据增长和体验跃升的体验设计师。</div>
+      <p class="viewpoint-intro-text">成为与业务深度融合和绑定，通过设计价值的最大化有效帮助业务实现数据增长和体验跃升的体验设计师。</p>
     </div>
   </div>
   <div class="viewpoint-item">
@@ -38,7 +47,7 @@ title: 设计价值观
     </div>
     <div class="viewpoint-intro">
       <div class="viewpoint-intro-title">推崇</div>
-      <div class="viewpoint-intro-text">有主人翁意识，有责任感，有担当，把业务的事团队的事情当作自己的事。</div>
+      <p class="viewpoint-intro-text">有主人翁意识，有责任感，有担当，把业务的事团队的事情当作自己的事。</p>
     </div>
   </div>
   <div class="viewpoint-item">
@@ -47,7 +56,7 @@ title: 设计价值观
     </div>
     <div class="viewpoint-intro">
       <div class="viewpoint-intro-title">倡导</div>
-      <div class="viewpoint-intro-text">打破边界意识，深度融合，主动向前一步，高效协作。</div>
+      <p class="viewpoint-intro-text">打破边界意识，深度融合，主动向前一步，高效协作。</p>
     </div>
   </div>
   <div class="viewpoint-item">
@@ -56,7 +65,7 @@ title: 设计价值观
     </div>
     <div class="viewpoint-intro">
       <div class="viewpoint-intro-title">主张</div>
-      <div class="viewpoint-intro-text">有正确的价值观，面对冲突，就事论事，积极解决。</div>
+      <p class="viewpoint-intro-text">有正确的价值观，面对冲突，就事论事，积极解决。</p>
     </div>
   </div>
   <div class="viewpoint-item">
@@ -65,7 +74,7 @@ title: 设计价值观
     </div>
     <div class="viewpoint-intro">
       <div class="viewpoint-intro-title">抵制</div>
-      <div class="viewpoint-intro-text">推卸责任、各自为战、在团队中传播负面信息。</div>
+      <p class="viewpoint-intro-text">推卸责任、各自为战、在团队中传播负面信息。</p>
     </div>
   </div>
 </div>

site/docs/design/principle/attitude.en-US.md

@@ -6,7 +6,7 @@ title: Professional and attitude
 h4 { margin-top: 60px !important; }
 .doc-cutline-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;}
 .doc-cutline-wrapper:last-child { margin-bottom: 60px; }
-.doc-cutline{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin-bottom:42px;padding:40px 30px;background:#F9FAFB;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:320px;max-width:100%}
+.doc-cutline{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin-bottom:42px;padding:40px 30px;background:#F9FAFB;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:220px;max-width:100%}
 .attitude-last{max-width:45%}
 .doc-cutline:after{position:absolute;bottom:-32px;left:0;font-size:12px;font-weight:500}
 .doc-cutline.do{margin-right:40px;border-bottom:solid 4px #2F86F6}
@@ -15,13 +15,13 @@ h4 { margin-top: 60px !important; }
 .doc-cutline.donot:after{content:"Don't";color:#FF5257}
 .doc-cutline-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
 .doc-cutline-item.horizon img{width:100%}
-.doc-cutline-item.vertical img{width:auto;height:100%}
-.attitude-item img{display: block;}
+.attitude-item img{display: block;width:667px;background-size:cover}
 @media (max-width:750px){.doc-cutline-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
 .doc-cutline{max-width:100%}
-.doc-cutline.do{margin-right:0}
+.doc-cutline.do{margin-right:0;padding:10px!important}
 .attitude-last{max-width:100%}
 }
+.special-img{width:440px!important;background-size:cover}
 .doc-content-paragraph h4{margin-top:40px}
 .attitude-last {margin-bottom: 14px;}
 </style>
@@ -36,7 +36,7 @@ Financial products have their own industry standard forms. They should be design
 <div class="doc-cutline-wrapper">
   <div class="doc-cutline do" style="padding: 36px 40px;">
     <div class="doc-cutline-item attitude-item">
-      <img src="https://pt-starimg.didistatic.com/static/starimg/img/bYrxMv1dLo1643256889799.png">
+      <img src="https://pt-starimg.didistatic.com/static/starimg/img/PJMafnzgcO1644396012789.png">
     </div>
   </div>
 </div>
@@ -49,7 +49,7 @@ The difference of product form is the external manifestation of business differe
 <div class="doc-cutline-wrapper">
   <div class="doc-cutline do" style="padding: 50px 60px;">
     <div class="doc-cutline-item attitude-item">
-      <img src="https://pt-starimg.didistatic.com/static/starimg/img/JEnklVFvI81643257076799.png">
+      <img class="special-img" src="https://pt-starimg.didistatic.com/static/starimg/img/JEnklVFvI81643257076799.png">
     </div>
   </div>
 </div>

site/docs/design/principle/attitude.md

@@ -6,7 +6,7 @@ title: 态度专业
 h4 { margin-top: 60px !important; }
 .doc-cutline-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;}
 .doc-cutline-wrapper:last-child { margin-bottom: 60px; }
-.doc-cutline{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin-bottom:42px;padding:40px 30px;background:#F9FAFB;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:320px;max-width:100%}
+.doc-cutline{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin-bottom:42px;padding:40px 30px;background:#F9FAFB;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:220px;max-width:100%}
 .attitude-last{max-width:45%}
 .doc-cutline:after{position:absolute;bottom:-32px;left:0;font-size:12px;font-weight:500}
 .doc-cutline.do{margin-right:40px;border-bottom:solid 4px #2F86F6}
@@ -15,13 +15,13 @@ h4 { margin-top: 60px !important; }
 .doc-cutline.donot:after{content:"Don't";color:#FF5257}
 .doc-cutline-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
 .doc-cutline-item.horizon img{width:100%}
-.doc-cutline-item.vertical img{width:auto;height:100%}
-.attitude-item img{display: block;}
+.attitude-item img{display: block;width:667px;background-size:cover}
 @media (max-width:750px){.doc-cutline-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
 .doc-cutline{max-width:100%}
-.doc-cutline.do{margin-right:0}
+.doc-cutline.do{margin-right:0;padding:10px!important}
 .attitude-last{max-width:100%}
 }
+.special-img{width:440px!important;background-size:cover}
 .doc-content-paragraph h4{margin-top:40px}
 .attitude-last {margin-bottom: 14px;}
 </style>
@@ -36,7 +36,7 @@ h4 { margin-top: 60px !important; }
 <div class="doc-cutline-wrapper">
   <div class="doc-cutline do" style="padding: 36px 40px;">
     <div class="doc-cutline-item attitude-item">
-      <img src="https://pt-starimg.didistatic.com/static/starimg/img/bYrxMv1dLo1643256889799.png">
+      <img src="https://pt-starimg.didistatic.com/static/starimg/img/PJMafnzgcO1644396012789.png">
     </div>
   </div>
 </div>
@@ -48,7 +48,7 @@ h4 { margin-top: 60px !important; }
 <div class="doc-cutline-wrapper">
   <div class="doc-cutline do" style="padding: 50px 60px;">
     <div class="doc-cutline-item attitude-item">
-      <img src="https://pt-starimg.didistatic.com/static/starimg/img/JEnklVFvI81643257076799.png">
+      <img class="special-img" src="https://pt-starimg.didistatic.com/static/starimg/img/JEnklVFvI81643257076799.png">
     </div>
   </div>
 </div>

site/docs/design/principle/clear-controllable.en-US.md

@@ -16,7 +16,6 @@ h4 { margin-top: 60px !important; }
 .doc-cutline.donot:after{content:"Don't";color:#FF5257}
 .doc-cutline-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
 .doc-cutline-item.horizon img{width:100%}
-.doc-cutline-item.vertical img{width:auto;height:100%}
 @media (max-width:750px){.doc-cutline-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
 .doc-cutline.do{margin-right:0}
 }

site/docs/design/principle/clear-controllable.md

@@ -16,7 +16,6 @@ h4 { margin-top: 60px !important; }
 .doc-cutline.donot:after{content:"Don't";color:#FF5257}
 .doc-cutline-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
 .doc-cutline-item.horizon img{width:100%}
-.doc-cutline-item.vertical img{width:auto;height:100%}
 @media (max-width:750px){.doc-cutline-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
 .doc-cutline.do{margin-right:0}
 }

site/docs/design/principle/intuition.en-US.md

@@ -16,7 +16,6 @@ h4 { margin-top: 60px !important; }
 .doc-cutline.donot:after{content:"Don't";color:#FF5257}
 .doc-cutline-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
 .doc-cutline-item.horizon img{width:100%}
-.doc-cutline-item.vertical img{width:auto;height:100%}
 @media (max-width:750px){.doc-cutline-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
 .doc-cutline.do{margin-right:0}
 }

site/docs/design/principle/intuition.md

@@ -16,7 +16,6 @@ h4 { margin-top: 60px !important; }
 .doc-cutline.donot:after{content:"Don't";color:#FF5257}
 .doc-cutline-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
 .doc-cutline-item.horizon img{width:100%}
-.doc-cutline-item.vertical img{width:auto;height:100%}
 @media (max-width:750px){.doc-cutline-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
 .doc-cutline.do{margin-right:0}
 }