chenJinxu
/
HealthStudentWeb
Sledovat 1
Oblíbit 0
Rozštěpit 0
Zdrojový kód Úkoly 0 Požadavky na natažení 0 Vydání 0 Wiki Aktivita
健康同学微信公众号h5项目
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.
95 Revize
4 Větve
3.8MB
Strom: 08b4792ebe
Větve Značky
${ item.name }
Vytvořit větev ${ searchTerm }
z „08b4792ebe“
${ noResults }
HealthStudentWeb/src/views/optimize/scss/index.scss

285 lines
8.5KB
Surový Blame Historie 

  1. .optimize {

  2.     min-height: 100vh;

  3.     .expert-box {

  4.         padding: 40px 32px;

  5.         height: 400px;

  6.         .van-swipe {

  7.             height: 100%;

  8.         }

  9.         img {

  10.             width: 100%;

  11.             height: 100%;

  12.             object-fit: contain;

  13.         }

  14.         .summary {

  15.             position: absolute;

  16.             top: 30%;

  17.             left: 20px;

  18.             h4 {

  19.                 font-size: 52px;

  20.                 color: #fff;

  21.                 font-weight: bold;

  22.             }

  23.             p {

  24.                 font-size: 24px;

  25.                 color: #fff;

  26.                 font-weight: normal;

  27.                 margin-top: 10px;

  28.                 max-width: 300px;

  29.             }

  30.         }

  31.         .van-swipe-item {

  32.             position: relative;

  33.             // p {

  34.             //     position: absolute;

  35.             //     right: 40px;

  36.             //     bottom: 40px;

  37.             //     font-size: 24px;

  38.             //     color: #fff;

  39.             //     padding: 10px 18px 10px 15px;

  40.             //     background-color: #000;

  41.             //     border-radius: 10px;

  42.             // }

  43.         }

  44.     }

  45.     .title {

  46.         display: flex;

  47.         flex-wrap: wrap;

  48.         align-items: center;

  49.         align-content: space-between;

  50.         justify-content: space-between;

  51.         p {

  52.             font-size: 26px;

  53.             color: #fff;

  54.             padding: 10px 30px;

  55.             background-color: #000;

  56.             border-radius: 40px;

  57.             font-weight: bold;

  58.         }

  59.         a {

  60.             font-size: 20px;

  61.             color: #000;

  62.             padding: 10px 30px;

  63.             background-color: #dfdfdf;

  64.             border-radius: 40px;

  65.             font-weight: bold;

  66.         }

  67.     }

  68.     .parenting {

  69.         padding: 0 32px;

  70.         ul {

  71.             width: 100%;

  72.             margin-top: 24px;

  73.             display: flex;

  74.             flex-wrap: wrap;

  75.             align-items: center;

  76.             align-content: space-between;

  77.             justify-content: space-between;

  78.             li {

  79.                 width: 30%;

  80.                 img {

  81.                     width: 100%;

  82.                     height: 200px;

  83.                     object-fit: contain;

  84.                 }

  85.                 p {

  86.                     text-align: center;

  87.                     font-size: 30px;

  88.                     color: #000;

  89.                     font-weight: bold;

  90.                 }

  91.                 span {

  92.                     text-align: center;

  93.                     font-size: 20px;

  94.                     color: grey;

  95.                     display: block;

  96.                     margin-top: 8px;

  97.                 }

  98.             }

  99.         }

  100.     }

  101.     .train {

  102.         padding: 52px 32px;

  103.         .main {

  104.             width: 100%;

  105.             overflow-x: scroll;

  106.             ul {

  107.                 width: max-content;

  108.                 margin-top: 30px;

  109.                 display: flex;

  110.                 flex-wrap: wrap;

  111.                 align-items: center;

  112.                 justify-content: flex-start;

  113.                 li {

  114.                     width: 480px;

  115.                     background-color: #2ea7e0;

  116.                     padding: 40px;

  117.                     border-radius: 50px;

  118.                     display: flex;

  119.                     align-items: center;

  120.                     align-content: space-between;

  121.                     justify-content: space-between;

  122.                     & + li {

  123.                         margin-left: 30px;

  124.                     }

  125.                     .left {

  126.                         p {

  127.                             font-size: 38px;

  128.                             color: #000;

  129.                             font-weight: bold;

  130.                         }

  131.                         span {

  132.                             display: block;

  133.                             font-size: 30px;

  134.                             color: #000;

  135.                         }

  136.                         div {

  137.                             display: flex;

  138.                             flex-wrap: wrap;

  139.                             align-items: center;

  140.                             justify-content: flex-start;

  141.                             margin-top: 10px;

  142.                             h5 {

  143.                                 padding: 8px 16px;

  144.                                 background-color: #000;

  145.                                 font-size: 20px;

  146.                                 color: #c2813f;

  147.                                 border-radius: 20px;

  148.                             }

  149.                             s {

  150.                                 font-style: normal;

  151.                                 font-size: 24px;

  152.                                 color: #fff;

  153.                                 display: block;

  154.                                 margin-left: 16px;

  155.                             }

  156.                         }

  157.                     }

  158.                     img {

  159.                         height: 140px;

  160.                         object-fit: contain;

  161.                     }

  162.                 }

  163.             }

  164.         }

  165.     }

  166.     .psychology {

  167.         padding-bottom: 40px;

  168.         .title {

  169.             padding: 0 32px;

  170.         }

  171.         .select {

  172.             margin: 30px 0 0 32px;

  173.             overflow-x: scroll;

  174.             ul {

  175.                 width: max-content;

  176.                 display: flex;

  177.                 flex-wrap: wrap;

  178.                 align-items: center;

  179.                 justify-content: flex-start;

  180.                 li {

  181.                     img {

  182.                         width: 100px;

  183.                         height: 100px;

  184.                         object-fit: contain;

  185.                     }

  186.                     & + li {

  187.                         margin-left: 25px;

  188.                     }

  189.                 }

  190.             }

  191.         }

  192.         .main {

  193.             padding: 0 32px;

  194.             margin-top: 30px;

  195.             .top {

  196.                 background-color: #179b3b;

  197.                 border-radius: 60px;

  198.                 padding: 40px;

  199.                 position: relative;

  200.                 height: 280px;

  201.                 p {

  202.                     color: #fff;

  203.                     font-size: 54px;

  204.                     font-weight: bold;

  205.                 }

  206.                 span {

  207.                     color: #fff;

  208.                     font-size: 26px;

  209.                     font-weight: normal;

  210.                 }

  211.                 img {

  212.                     position: absolute;

  213.                     bottom: 0;

  214.                     right: 0;

  215.                     object-fit: contain;

  216.                     width: 55%;

  217.                 }

  218.             }

  219.             .bottom {

  220.                 padding: 40px 30px;

  221.                 border-radius: 60px;

  222.                 border: 5px solid #ecff9c;

  223.                 margin-top: -40px;

  224.                 z-index: 2;

  225.                 position: relative;

  226.                 background-color: #fff;

  227.                 h4 {

  228.                     padding: 0 20px;

  229.                     font-size: 32px;

  230.                     color: #000;

  231.                     span {

  232.                         color: #a3a3a3;

  233.                         margin: 0 6px;

  234.                     }

  235.                 }

  236.                 ul {

  237.                     width: 100%;

  238.                     display: flex;

  239.                     flex-wrap: wrap;

  240.                     align-items: center;

  241.                     justify-content: flex-start;

  242.                     margin-top: 20px;

  243.                     li {

  244.                         margin: 10px;

  245.                         color: #000;

  246.                         padding: 10px 20px;

  247.                         border-radius: 40px;

  248.                         background-color: #ecff9c;

  249.                         font-size: 22px;

  250.                         font-weight: bold;

  251.                     }

  252.                 }

  253.                 div {

  254.                     display: flex;

  255.                     flex-wrap: wrap;

  256.                     align-items: center;

  257.                     align-content: space-between;

  258.                     justify-content: space-between;

  259.                     margin-top: 40px;

  260.                     h5 {

  261.                         display: flex;

  262.                         flex-wrap: wrap;

  263.                         align-items: flex-end;

  264.                         justify-content: flex-start;

  265.                         img {

  266.                             width: 50px;

  267.                             object-fit: contain;

  268.                         }

  269.                         span {

  270.                             color: #000;

  271.                             font-size: 28px;

  272.                             margin-left: 10px;

  273.                         }

  274.                     }

  275.                     p {

  276.                         font-size: 54px;

  277.                         color: #179b3b;

  278.                         font-weight: bold;

  279.                     }

  280.                 }

  281.             }

  282.         }

  283.     }

  284. }