first commit

历届学生/fontendsix/项目练习/上课项目/美食杰/css/indexx.css

@@ -0,0 +1,276 @@
+.header{
+   
+    align-items: center;
+    background: #fff;
+    padding: 0.5rem;
+    box-sizing: border-box;
+    height: 2.25rem;
+    position: fixed;
+    width: 100%;
+    z-index: 999;
+    display: flex;
+
+}
+.header a{
+    margin: 0;
+    border: 0;
+    padding: 0;
+    font-style: normal;
+    color: #0062cc;
+    text-decoration: none;
+    background-color: transparent;
+}
+.iconfont{
+    color: #666;
+    font-size: .9rem !important;
+}
+.header a:nth-child(2) {
+    width: 90%;
+}
+.header input{
+    width: 100%;
+    height: 1.5rem;
+    border: none;
+    padding-left: .95rem;
+    margin-left: .5rem;
+    background: #f1f1f4;
+    border-radius: 1.5rem;
+    font-size: .75rem;
+}
+.content{
+    margin-bottom: 3rem;
+    padding-top: 2.5rem;
+}
+.swiper-wrapper .swiper-slide img{
+width: 100%;
+}
+.banner{
+    height: 170px;
+}
+.list{
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+}
+
+.list li{
+    width: 20%;
+    text-align: center;
+
+}
+.list li a{
+    color: #0062cc;
+    text-decoration: none;
+    background-color: transparent;
+}
+
+.list li a{
+    color: #0062cc;
+    text-decoration: none;
+    background-color: transparent;
+
+}
+.list li a img{
+    width: 2.5rem;
+    height: 2.5rem;
+}
+.list_text{
+    font-size: .6rem;
+    color: #666;
+}
+.active::after{
+    content: '';
+    height: .3rem;
+    border-radius: .15rem;
+    width: 100%;
+    left: 0px;
+    bottom: .15rem;
+    background: #ff9d9b;
+    position: absolute;
+    z-index: 50;
+    display: block;
+}
+
+.meals{
+    margin-top: 1.6rem;
+    padding: 0 .8rem;
+}
+.meals_top{
+    font-size: .9rem;
+    font-weight: 600;
+    color: #999;
+    line-height: 1.1rem;
+    margin-bottom: .5rem;
+}
+.meals_list li{
+    position: relative;
+    font-size: .8rem;
+    margin-right: 1rem;
+    color: #666;
+}
+.meals_list{
+    display: flex;
+    margin-bottom: .5rem;
+    align-items: flex-end;
+}
+.active{
+    font-size: 1.4rem !important;
+    color: #333 !important;
+}
+.meals .meals_li a{
+    color: #0062cc;
+    text-decoration: none;
+    background-color: transparent;
+}
+.meals .swiper-container{
+    height:280px;
+}
+.meals .swiper-wrapper .swiper-slide{
+    display: flex;
+    justify-content: space-between
+}
+
+.meals .meals .meals_text{}
+.meals_text img{
+    width: 8.35rem;
+    height: 11.9rem;
+    border-radius: .35rem;
+}
+.meals_name{
+    margin-top: .5rem;
+    font-size: .9rem;
+    font-weight: 600;
+    color: #333;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 167px;
+}
+.text{
+    padding: 0 .15rem;
+    background: #ff8d8d;
+    color: #fff;
+    font-size: .4rem;
+}
+
+.tips{
+    font-size: .55rem;
+    color: #ff8d8d;
+    line-height: .7rem;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    background: #fff2f2;
+    border-radius: .1rem;
+    padding: .2rem .3rem;
+}
+.recommend{
+    margin-top: 1.6rem;
+    padding: 0 .8rem;
+}
+.recommend_text{
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: #333;
+    line-height: 1.8rem;
+    margin-bottom: .8rem;
+}
+.recommend ul{
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+}
+.recommend ul li{
+    width: 5.2rem;
+    box-shadow: 0px 0px 0.6rem rgb(0 0 0 / 10%);
+    background: #fff;
+    border-radius: 1.05rem;
+    margin-bottom: 1rem;
+}
+.recommend_active {
+    background: #fe9b95 !important;
+    box-shadow: 0px 0px 0.6rem rgb(255 155 149 / 50%) !important;
+}
+.recommend li a{
+    
+    
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #0062cc;
+    text-decoration: none;
+    background-color: transparent;
+
+}
+.recommend img{
+    width: .9rem;
+    height: .9rem;
+    margin-right: .2rem;
+    line-height: 2rem;
+}
+.recommend span{
+    font-size: .6rem;
+    color: #333;
+    line-height: 2.1rem;
+    display: inline-block;
+    vertical-align: top;
+    font-weight: 600;
+}
+.recommend_active span {
+    color: #fff !important;
+}
+.together{
+    padding: 0 .8rem;
+}
+.publi{
+    font-size: .8rem;
+    font-weight: 600;
+    color: #999;
+    line-height: 1.1rem;
+    margin-bottom: .5rem;
+}
+.together_list{
+    display: flex;
+    justify-content: flex-start;
+    position: relative;
+    align-items: flex-end;
+}
+.together_list .active{
+    font-size: 1.4rem !important;
+    color: #333 !important;
+}
+.together_list li{
+    margin-right: 1rem;
+    font-size: .8rem;
+    color: #666;
+    cursor: pointer;
+    position: relative;
+}
+.together_list .active::after {
+    content: '';
+    height: .3rem;
+    border-radius: .15rem;
+    width: 100%;
+    left: 0px;
+    bottom: .15rem;
+    background: #ff9d9b;
+    position: absolute;
+    z-index: 50;
+    display: block;
+}
+.together_bott{
+    width: 100%;
+    margin-top: .5rem;
+
+}
+
+
+.together_bott .together_act {
+    margin-bottom: .8rem;
+    
+    -webkit-column-gap:0.1rem;
+    -moz-column-gap:o.1rem;
+    -o-column-gap: .6rem;
+  }