chenJinxu
/
HealthStudentWeb
關注 1
收藏 0
複製 0
程式碼 問題 0 合併請求 0 版本發佈 0 Wiki 活動
健康同学微信公众号h5项目
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 提交
4 分支
3.8MB
目錄樹: 2827485741
分支列表 標籤
${ item.name }
建立分支 ${ searchTerm }
從 '2827485741'
${ noResults }
HealthStudentWeb/src/views/today/scss/index.scss

435 line
13KB
原始文件 Blame 歷史記錄 

  1. .today {

  2.     min-height: 100vh;

  3.     .today-status {

  4.         display: flex;

  5.         justify-content: center;

  6.         flex-direction: column;

  7.         align-items: center;

  8.         position: relative;

  9.         padding:0 40px;

  10.         .img {

  11.             width: 40%;

  12.             object-fit: contain;

  13.             margin-top: 20px;

  14.         }

  15.         .icon{

  16.             width: 60px;

  17.             height: 60px;

  18.             object-fit: contain;

  19.             position: absolute;

  20.             top: 40px;

  21.             right: 40px;

  22.         }

  23.         .status {

  24.             display: flex;

  25.             flex-wrap: wrap;

  26.             align-items: center;

  27.             align-content: space-between;

  28.             justify-content: space-between;

  29.             width: 100%;

  30.             margin: 40px 0;

  31.             p {

  32.                 font-size: 30px;

  33.                 color: #434144;

  34.                 font-weight: bold;

  35.             }

  36.             ul {

  37.                 display: flex;

  38.                 flex-wrap: wrap;

  39.                 align-items: center;

  40.                 justify-content: flex-start;

  41.                 li {

  42.                     width: 40px;

  43.                     height: 20px;

  44.                     border-radius: 20px;

  45.                     position: relative;

  46.                     & + li {

  47.                         margin-left: 10px;

  48.                     }

  49.                     &.toobad {

  50.                         background-color: #ff5f8b;

  51.                         &:after{

  52.                             background-color: #ff5f8b;

  53.                         }

  54.                     }

  55.                     &.ordinary {

  56.                         background-color: #2ea7e0;

  57.                         &:after{

  58.                             background-color: #2ea7e0;

  59.                         }

  60.                     }

  61.                     &.sameas {

  62.                         background-color: #8dc21f;

  63.                         &:after{

  64.                             background-color: #8dc21f;

  65.                         }

  66.                     }

  67.                     &.excellent {

  68.                         background-color: #179b3b;

  69.                         &:after{

  70.                             background-color: #179b3b;

  71.                         }

  72.                     }

  73.                     &.active {

  74.                         width: 120px;

  75.                         &:after {

  76.                             opacity: 1;

  77.                         }

  78.                         &:before {

  79.                             opacity: 1;

  80.                         }

  81.                     }

  82.                     &:after {

  83.                         content: '';

  84.                         display: block;

  85.                         position: absolute;

  86.                         top: 50%;

  87.                         left: 50%;

  88.                         transform: translateX(-50%) translateY(-50%);

  89.                         width: 40px;

  90.                         height: 40px;

  91.                         opacity: 0;

  92.                         border-radius: 50%;

  93.                     }

  94.                     &:before {

  95.                         content: '';

  96.                         display: block;

  97.                         position: absolute;

  98.                         top: 50%;

  99.                         left: 50%;

  100.                         transform: translateX(-50%) translateY(-50%);

  101.                         width: 25px;

  102.                         height: 25px;

  103.                         opacity: 0;

  104.                         border-radius: 50%;

  105.                         background-color:#fff;

  106.                         z-index: 2;

  107.                     }

  108.                 }

  109.             }

  110.         }

  111.         .interpret {

  112.             padding: 50px 60px;

  113.             border-radius: 40px;

  114.             border: 1px solid bisque;

  115.             p{

  116.                 font-size: 28px;

  117.                 color: #434144;

  118.                 white-space: pre-line;

  119.                 line-height: 1.8em;

  120.             }

  121.             .bottom {

  122.                 width: 100%;

  123.                 position: relative;

  124.                 p {

  125.                     text-align: center;

  126.                     color: #35a556;

  127.                 }

  128.                 div{

  129.                     position: absolute;

  130.                     top: 50%;

  131.                     right: 0;

  132.                     transform: translatey(-50%);

  133.                     display: flex;

  134.                     flex-wrap: wrap;

  135.                     align-items: center;

  136.                     justify-content: flex-start;

  137.                     span{

  138.                         color: #35a556;

  139.                         font-size: 24px;

  140.                     }

  141.                     img {

  142.                         width: 40px;

  143.                         height: 40px;

  144.                         object-fit: contain;

  145.                         margin-left: 10px;

  146.                     }

  147.                 }

  148.             }

  149.         }

  150.     }

  151.     .title {

  152.         display: flex;

  153.         flex-wrap: wrap;

  154.         align-items: center;

  155.         align-content: space-between;

  156.         justify-content: space-between;

  157.         p {

  158.             font-size: 30px;

  159.             color: #434144;

  160.             font-weight: bold;

  161.         }

  162.         >div {

  163.             display: flex;

  164.             flex-wrap: wrap;

  165.             align-items: center;

  166.             justify-content: flex-start;

  167.             p {

  168.                 margin-right: 10px;

  169.             }

  170.             >div {

  171.                 display: flex;

  172.                 flex-wrap: wrap;

  173.                 align-items: center;

  174.                 justify-content: flex-start;

  175.                 p {

  176.                     font-size: 26px;

  177.                     color: #fff;

  178.                     background-color: #179b3b;

  179.                     border-radius: 20px;

  180.                     padding: 8px 20px;

  181.                     margin-right: 10px;

  182.                     font-weight: normal;

  183.                 }

  184.             }

  185.         }

  186.     }

  187.     .emotion {

  188.         padding:0 40px;

  189.         margin-top: 60px;

  190.         ul {

  191.             display: flex;

  192.             flex-wrap: wrap;

  193.             align-items: center;

  194.             align-content: space-between;

  195.             justify-content: space-between;

  196.             margin-top: 30px;

  197.             li {

  198.                 width: 25%;

  199.                 border-radius: 40px;

  200.                 padding: 20px;

  201.                 &:nth-of-type(1) {

  202.                     background-color: #179b3b;

  203.                 }

  204.                 &:nth-of-type(2) {

  205.                     background-color: #ff5f8b;

  206.                 }

  207.                 &:nth-of-type(3) {

  208.                     background-color: #8dc21f;

  209.                 }

  210.                 h4 {

  211.                     color: #fff;

  212.                     font-size: 50px;

  213.                     font-weight: normal;

  214.                 }

  215.                 p {

  216.                     color: #fff;

  217.                     font-size: 32px;

  218.                     margin-top: 0px;

  219.                 }

  220.                 span {

  221.                     color: #fff;

  222.                     font-size: 24px;

  223.                     border-top: 1px solid #fff;

  224.                     padding-top: 12px;

  225.                 }

  226.                 time {

  227.                     color: #fff;

  228.                     font-size: 24px;

  229.                     display: block;

  230.                 }

  231.             }

  232.         }

  233.     }

  234.     .perception {

  235.         padding:0 40px;

  236.         margin-top: 60px;

  237.         ul {

  238.             display: flex;

  239.             flex-wrap: wrap;

  240.             align-items: center;

  241.             align-content: space-between;

  242.             justify-content: space-between;

  243.             margin-top: 30px;

  244.             li {

  245.                 width: 25%;

  246.                 border-radius: 40px;

  247.                 padding: 20px;

  248.                 padding-bottom: 80px;

  249.                 &:nth-of-type(1) {

  250.                     background-color: #179b3b;

  251.                 }

  252.                 &:nth-of-type(2) {

  253.                     background-color: #ff5f8b;

  254.                 }

  255.                 &:nth-of-type(3) {

  256.                     background-color: #8dc21f;

  257.                 }

  258.                 h4 {

  259.                     color: #fff;

  260.                     font-size: 46px;

  261.                     font-weight: normal;

  262.                 }

  263.                 p {

  264.                     color: #fff;

  265.                     font-size: 30px;

  266.                     margin-top: 0px;

  267.                 }

  268.                 time {

  269.                     color: #fff;

  270.                     font-size: 24px;

  271.                     display: block;

  272.                 }

  273.             }

  274.         }

  275.         .tip {

  276.             margin-top: 30px;

  277.             display: flex;

  278.             justify-content: flex-start;

  279.             border-bottom: 1px solid #dfdfdf;

  280.             padding-bottom: 40px;

  281.             img {

  282.                 width: 29px;

  283.                 height: 47px;

  284.                 object-fit: contain;

  285.                 margin-right: 30px;

  286.             }

  287.             p {

  288.                 font-size: 28px;

  289.                 color: #434144;

  290.                 line-height: 1.5em;

  291.                 span {

  292.                     color: #edb21d;

  293.                 }

  294.             }

  295.         }

  296.     }

  297.     .step {

  298.         padding:0 40px;

  299.         margin-top: 50px;

  300.         .main {

  301.             border-radius: 30px;

  302.             border: 1px solid #179b3b;

  303.             padding: 40px 30px;

  304.             display: flex;

  305.             align-items: center;

  306.             align-content: space-between;

  307.             justify-content: space-between;

  308.             ul {

  309.                 li {

  310.                     .specific {

  311.                         font-size: 40px;

  312.                         color: #434144;

  313.                         span {

  314.                             font-weight: bold;

  315.                         }

  316.                     }

  317.                     .category {

  318.                         font-size: 28px;

  319.                         color: #434144;

  320.                         font-weight: bold;

  321.                         margin-top: 6px;

  322.                         span {

  323.                             font-weight: normal;

  324.                             padding: 5px 15px;

  325.                             background-color: #434144;

  326.                             color: #fff;

  327.                             font-size: 24px;

  328.                             border-radius: 20px;

  329.                             margin-left: 10px;

  330.                         }

  331.                     }

  332.                     & + li {

  333.                         margin-top: 40px;

  334.                     }

  335.                 }

  336.             }

  337.             .annular {

  338.                 width: 50%;

  339.                 position: relative;

  340.                 transform: rotate(180deg);

  341.                 .van-circle {

  342.                     position: absolute;

  343.                     top: 50%;

  344.                     left: 50%;

  345.                     transform: translateX(-50%) translateY(-50%);

  346.                 }

  347.                 p {

  348.                     position: absolute;

  349.                     top: 50%;

  350.                     left: 50%;

  351.                     transform: translateX(-50%) translateY(-50%) rotate(180deg);

  352.                     font-size: 28px;

  353.                     color: #434144;

  354.                     font-weight: bold;

  355.                 }

  356.             }

  357.         }

  358.     }

  359.     .diary {

  360.         padding:0 40px;

  361.         margin: 50px 0;

  362.         .main {

  363.             width: 100%;

  364.             .van-checkbox-group {

  365.                 width: 100%;

  366.                 margin-top: 50px;

  367.                 display: flex;

  368.                 flex-wrap: wrap;

  369.                 align-items: center;

  370.                 align-content: space-between;

  371.                 justify-content: space-between;

  372.             }

  373.             .van-checkbox {

  374.                 width: 26%;

  375.                 min-width: 88px;

  376.                 &:nth-of-type(n+4) {

  377.                     margin-top: 40px;

  378.                 }

  379.                 .van-checkbox__label img {

  380.                     width: 30px;

  381.                 }

  382.             }

  383.             .textarea {

  384.                 border-radius: 40px;

  385.                 border: 1px solid #179b3b;

  386.                 margin-top: 30px;

  387.                 overflow: hidden;

  388.                 textarea {

  389.                     width: 100%;

  390.                     padding: 30px;

  391.                     font-size: 28px;

  392.                 }

  393.             }

  394.         }

  395.     }

  396.     .knowledge {

  397.         padding: 0 0 40px 40px;

  398.         .main {

  399.             width: 100%;

  400.             overflow-x: scroll;

  401.             ul {

  402.                 width: max-content;

  403.                 margin-top: 30px;

  404.                 display: flex;

  405.                 flex-wrap: wrap;

  406.                 align-items: center;

  407.                 justify-content: flex-start;

  408.                 li {

  409.                     width: 480px;

  410.                     background-color: #179b3b;

  411.                     padding: 40px;

  412.                     border-radius: 50px;

  413.                     display: flex;

  414.                     align-items: center;

  415.                     align-content: space-between;

  416.                     justify-content: space-between;

  417.                     & + li {

  418.                         margin-left: 30px;

  419.                     }

  420.                     p {

  421.                         width: 55%;

  422.                         font-size: 28px;

  423.                         color: #fff;

  424.                         white-space: pre-line;

  425.                     }

  426.                     img {

  427.                         height: 140px;

  428.                         object-fit: contain;

  429.                     }

  430.                 }

  431.             }

  432.         }

  433.     }

  434. }