first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/css/banner.css
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/css/banner.css
@@ -0,0 +1,17 @@
+.header img{
+    width: 100%;
+}
+.content{
+    padding: 0rem 0.24rem 0.52rem;
+}
+.content h1{
+    font-size: 0.44rem;
+    font-weight: 700;
+    color: #1b1b1b;
+    line-height: 0.72rem;
+    margin: 0rem 0.08rem;
+    margin-top: 0.2rem;
+}
+.content img {
+    width: 100%;
+}
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/css/clear.css
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/css/clear.css
@@ -0,0 +1,19 @@
+body,ul,li,p,h1,h2,h3,h4,h5,h6 {
+    margin: 0;
+    padding: 0;
+}
+
+li {
+    list-style: none;
+}
+
+a {
+    text-decoration: none;
+    color: #000;
+}
+
+input {
+    outline: none;
+    border: none;
+    padding: 0;
+}
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/css/index.css
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/css/index.css
@@ -0,0 +1,224 @@
+.header {
+    position: fixed;
+    width: 100%;
+    background: #fff;
+    top: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.32rem;
+    box-sizing: border-box;
+}
+.search {
+    width: 100%;
+    height: 0.8rem;
+    background: #f5f5f5;
+    border-radius: 0.08rem;
+    font-size: 0.32rem;
+    color: #999;
+    display: flex;
+    align-items: center;
+    padding-left: 0.3rem;
+}
+.search i {
+    margin-right: 0.2rem;
+    margin-top: 0.04rem;
+}
+.content {
+    margin-top: 1.44rem;
+    margin-bottom: 1.52rem;
+}
+.banner_item {
+    width: 92%;
+    height: 2.951rem;
+    position: relative;
+}
+.banner_item .back_img{
+    width: 100%;
+    height: 100%;
+    border-radius: 0.32rem;
+    box-shadow: 7px 0rem 0.14em rgba(0,0,0,0.3);
+    object-fit: cover;
+}
+.banner_item .user_bottom{
+    position: absolute;
+    left: 0.32rem;
+    bottom: 0.2rem;
+}
+.banner_item .user_bottom h2{
+    font-size: 0.4rem;
+    line-height: 0.6rem;
+    color: #fff;
+    font-weight: 600;
+    text-shadow: 0rem 0rem 0.08rem rgba(0,0,0,0.3);
+    margin-bottom: 0.2rem;
+}
+.banner_item .user_bottom .user_img{
+    display: flex;
+    align-items: center;
+}
+.banner_item .user_img img{
+    height: 0.6rem;
+    width: 0.6rem;
+    border-radius: 0.3rem;
+    display: inline-block;
+    vertical-align: top;
+    box-shadow: 0rem 0rem 0.08rem rgba(0,0,0,0.3);
+}
+.banner_item .user_img span{
+    font-size: 0.28rem;
+    font-weight: 600;
+    color: #fff;
+    max-width: 60%;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    padding-left: 0.2rem;
+    text-shadow: 0rem 0rem 0.08rem rgba(0,0,0,0.3);
+}
+
+.sanc {
+    margin-top: 15px;
+}
+
+.sanc .title {
+    font-size: 0.32rem;
+    font-weight: 600;
+    color: #999;
+    margin-bottom: 0.2rem;
+}
+.sanc .title_li {
+    display: flex;
+    align-items: flex-end;
+    margin-bottom: 10px;
+}
+.sanc .title_li .active {
+    font-size: 0.6rem;
+    font-weight: 600;
+    color: #333;
+    line-height: 0.72rem;
+}
+.sanc .title_li .active:after {
+    content: "";
+    position: absolute;
+    background: #ff9d9b;
+    width: 100%;
+    height: 6px;
+    border-radius: 3px;
+    left: 0;
+    bottom: 0px;
+    z-index: -2;
+}
+.sanc .title_li li {
+    font-size: 0.32rem;
+    color: #666;
+    margin-right: 20px;
+    position: relative;
+}
+.title_list {
+    display: flex;
+}
+.title_list li{
+    width: 45%;
+    margin-right: 8px;
+}
+.title_list li .item_img{
+    width: 100%;
+    height: 4.48rem;
+    border-radius: 0.14rem;
+    box-shadow: 0 0.06rem 0.12rem rgb(0 0 0 / 0%);
+}
+.title_list li h2 {
+    font-size: 0.36rem;
+    font-weight: 600;
+    color: #333;
+    display: block;
+    height: 0.56rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 0.56rem;
+    padding: 0.24rem 0rem 0.04rem;
+}
+.title_list li .yyw{}
+.title_list li .y{
+    font-size: 0.16rem;
+    width: 18px;
+    height: 12px;
+    line-height: 0.24rem;
+    border-radius: 0.04rem;
+    color: #fff;
+    padding: 0rem 0.06rem;
+    font-weight: 600;
+    background: #ff8d8d;
+    border-bottom-left-radius: 0rem;
+}
+.title_list li .desc{
+    background: #fff2f2;
+    border-radius: 2px;
+    margin: 8px 16px 0px 0px;
+    padding: 4px 6px 4px 6px;
+    box-sizing: border-box;
+    display: inline-block;
+
+    font-size: 11px;
+    color: #ff8d8d;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.alldo .title_list {
+    justify-content: space-between;
+}
+.alldo .title_list li {
+    width: 47%;
+}
+.auth {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 10px;
+    align-items: center;
+}
+.auth .left {
+    display: flex;
+    align-items: center;
+    flex: 1;
+}
+.auth .left img {
+    height: 18px;
+    width: 18px;
+    margin-right: 5px;
+    border-radius: 9px;
+    box-shadow: 0px 1px 3px rgb(0 0 0 / 10%);
+}
+.auth .left span {
+    height: 18px;
+    font-size: 9px;
+    zoom: 0.9;
+    color: #666;
+    max-width: 45%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.auth .right i{
+    margin-right: 5px;
+}
+.auth .right span{
+    color: #666;
+    font-size: 9px;
+    zoom: 0.9;
+}
+.alldo_father ul {
+    display: none;
+    overflow: hidden;
+}
+.alldo_father ul li{
+    float: left;
+    margin-bottom: 15px;
+}
+.alldo_father .f_active {
+    display: block !important;
+}
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/css/info.css
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/css/info.css
@@ -0,0 +1,282 @@
+.background {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    right: 0;
+    left: 0;
+    height: 45px;
+    display: flex;
+    align-items: center;
+    z-index: 999;
+    padding: 0 15px;
+    box-sizing: border-box;
+}
+.header {
+    position: relative;
+    height: 375px;
+}
+.header img {
+    width: 100%;
+    height: 100%;
+}
+.header i {
+    font-weight: 700;
+    font-size: 18px;
+}
+
+.content {
+    position: relative;
+    padding: 0 15px;
+}
+
+.info_main {
+    width: 100%;
+    background: #fff;
+    border-radius: 16px;
+    box-shadow: 0px 0px 32px rgb(0 0 0 / 10%);
+    position: relative;
+    top: -55px;
+    padding: 20px 15px 10px;
+    box-sizing: border-box;
+}
+.info_main h2{
+    font-size: 28px;
+    font-weight: 700;
+    color: #333;
+    line-height: 38px;
+}
+.info_main .posttime{
+    font-size: 12px;
+    color: #999;
+    line-height: 20px;
+    display: block;
+    padding: 4px 0px 0px;
+}
+.info_main .yyinfos{
+    margin: 10px 0px 10px;
+    position: relative;
+    padding: 10px 0px 0px;
+    border-top: 1px solid #f5f5f5;
+}
+.info_main .yyinfos li{
+    display: flex;
+    align-items: center;
+}
+.info_main .yyinfos li span {
+    display: inline-block;
+    font-size: 9px;
+    zoom: 0.9;
+    line-height: 17px;
+    flex: 1;
+    color: #4dd196;
+}
+.yyinfos li .jdw{
+    height: 5px;
+    border-radius: 3px;
+    flex: 4;
+    background: #ebfbf4;
+}
+.yyinfos li .jdw .jd{
+    height: 5px;
+    border-radius: 3px;
+    background: #4dd196;
+    display: inline-block;
+    width: 10px;
+}
+.tips {
+    font-size: 10px;
+    color: #999;
+    line-height: 24px;
+    text-align: center;
+}
+.cpargsw {
+    display: flex;
+    justify-content: space-around;
+    margin-top: 17px;
+}
+.cpargsw li {
+    text-align: center;
+}
+.cpargsw li .i{
+    height: 30px;
+    width: 30px;
+    background: url("https://st-cn.meishij.net/p2/20200221/20200221173101_145.png") no-repeat;
+    background-size: 30px 150px;
+    margin: 0 auto;
+}
+.cpargsw li span{
+    display: inline-block;
+    font-size: 12px;
+    line-height: 24px;
+    color: #666666;
+}
+.show_more {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    height: 42px;
+    margin-bottom: 20px;
+    margin-top: 20px;
+    position: relative;
+}
+.show_more .text {
+    font-weight: 400;
+    text-align: justify;
+    font-size: 14px;
+    color: #999999;
+    line-height: 21px;
+    display: block;
+}
+
+.show_more .more {
+    height: 27px;
+    color: #5a92f5;
+    font-size: 14px;
+    line-height: 27px;
+    font-weight: 400;
+    position: absolute;
+    right: 0px;
+    bottom: -3px;
+    display: flex;
+    align-items: center;
+    background-image: linear-gradient(to right,rgba(255,255,255,0.1),rgba(255,255,255,0.5),rgba(255,255,255,1),rgba(255,255,255,1),rgba(255,255,255,1),rgba(255,255,255,1));
+    padding-left: 60px;
+}
+.show_more .more span {
+    color: #5a92f5;
+    font-size: 14px;
+}
+.show_more .more img {
+    height: 14px;
+    width: 14px;
+    margin-left: 2px;
+}
+
+.liao {
+    margin-bottom: 20px;
+}
+.liao .title {
+    display: flex;
+    align-items: center;
+    height: 40px;
+    background: #fff;
+    font-size: 16px;
+    color: #333;
+    font-weight: 700;
+}
+.liao .title span{
+    color: #999;
+    font-size: 12px;
+    padding-left: 6px;
+    font-weight: 300;
+}
+.liao .list {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    border-top: 1px solid rgba(0,0,0,0.05);
+}
+.liao .list li {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 36px;
+    width: 50%;
+    box-sizing: border-box;
+    border-bottom: 1px solid rgba(0,0,0,0.05);
+    border-right: 1px solid rgba(0,0,0,0.05);
+}
+.liao .list li:nth-child(2n) {
+    border-right: none;
+}
+.liao .list .list_title {
+    box-sizing: border-box;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    font-size: 14px;
+    color: #108ee9;
+    font-weight: 400;
+    padding-left: 20px;
+}
+.liao .list .list_nums {
+    width: 45%;
+    box-sizing: border-box;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    font-size: 14px;
+    color: #666;
+    font-weight: 400;
+    text-align: right;
+    padding-right: 20px;
+    box-sizing: border-box;
+}
+.info_list {
+    margin-top: -29px;
+}
+.info_list li {
+}
+.info_list li p{
+    padding: 15px 0px 30px;
+    font-size: 16px;
+    line-height: 24px;
+    color: #666;
+    font-weight: 400;
+}
+.info_list li .info_top{
+    position: relative;
+    height: 230px;
+}
+.info_list li .info_top img{
+    width: 100%;
+    height: 100%;
+}
+.info_list li .info_top .setp{
+    height: 40px;
+    line-height: 40px;
+    color: #333;
+    font-size: 18px;
+    font-weight: 700;
+    padding: 0px 20px 0px 15px;
+    background: rgba(255,255,255,0.9);
+    position: absolute;
+    left: 0px;
+    top: 15px;
+    border-top-right-radius: 20px;
+    border-bottom-right-radius: 20px;
+    z-index: 100;
+}
+
+.info_list li .change_list {
+    display: flex;
+    align-items: center;
+    margin-top: 15px;
+}
+.info_list li .change_list img {
+    width: 20.3333333vw;
+    height: 20.3333333vw;
+    margin: 0 2.66666666vw 0 0;
+    box-sizing: border-box;
+    background: #eee;
+    object-fit: cover;
+    opacity: 0.4;
+}
+.step {
+    margin-top: 18px;
+}
+.step .step_title {
+    height: 40px;
+    line-height: 40px;
+    color: #333;
+    font-size: 18px;
+    font-weight: 700;
+    background: rgba(255,255,255,0.9);
+    border-top-right-radius: 20px;
+    border-bottom-right-radius: 20px;
+}
+.step .stepdes {
+    font-size: 16px;
+    line-height: 24px;
+    color: #666;
+    font-weight: 400;
+}
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/css/like.css
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/css/like.css
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/css/loading.css
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/css/loading.css
@@ -0,0 +1,208 @@
+.loading {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: 999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.back {
+    padding: 0.4rem 0.4rem;
+    background: #fb7299;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.16rem;
+    max-width: 4rem;
+}
+.back span {
+    font-size: 0.3rem;
+    letter-spacing: 0.02rem;
+    color: #fff;
+}
+.load8 {
+    width: 0.8rem;
+    height: 0.8rem;
+    position: relative;
+}
+.dialog_f {
+    width: 86%;
+    background: #fff;
+    border-radius: 0.32rem;
+    font-size: 0.32rem;
+}
+.dialog_header {
+    padding-top: 0.52rem;
+    font-weight: 500;
+    line-height: 0.48rem;
+    text-align: center;
+}
+.dialog_message {
+    max-height: 60vh;
+    padding: 0.16rem 0.48rem 0.52rem 0.48rem;
+    overflow-y: auto;
+    font-size: 0.28rem;
+    line-height: 0.4rem;
+    text-align: center;
+}
+.dialog_footer {
+    display: flex;
+    height: 0.96rem;
+    border-top: 0.02rem solid #ebedf0;
+}
+.dialog_cancel,
+.dialog_confirm {
+    width: 50%;
+    text-align: center;
+    line-height: 0.96rem;
+}
+.dialog_cancel:active {
+    background: #e6e6e6;
+    border-bottom-left-radius: 0.32rem;
+}
+.dialog_confirm:active {
+    background: #e6e6e6;
+    border-bottom-right-radius: 0.32rem;
+}
+.dialog_cancel {
+    color: #323233;
+    border-right: 0.02rem solid #ebedf0;
+}
+.dialog_confirm {
+    color: #fb7299;
+}
+.container1>div,
+.container2>div,
+.container3>div {
+    width: 0.2rem;
+    height: 0.2rem;
+    background-color: #fff;
+    border-radius: 100%;
+    position: absolute;
+    -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
+    animation: bouncedelay 1.2s infinite ease-in-out;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+}
+
+.load8 .load8-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+.container2 {
+    -webkit-transform: rotateZ(45deg);
+    transform: rotateZ(45deg);
+}
+
+.container3 {
+    -webkit-transform: rotateZ(90deg);
+    transform: rotateZ(90deg);
+}
+
+.circle1 {
+    top: 0;
+    left: 0;
+}
+
+.circle2 {
+    top: 0;
+    right: 0;
+}
+
+.circle3 {
+    right: 0;
+    bottom: 0;
+}
+
+.circle4 {
+    left: 0;
+    bottom: 0;
+}
+
+.container2 .circle1 {
+    -webkit-animation-delay: -1.1s;
+    animation-delay: -1.1s;
+}
+
+.container3 .circle1 {
+    -webkit-animation-delay: -1.0s;
+    animation-delay: -1.0s;
+}
+
+.container1 .circle2 {
+    -webkit-animation-delay: -0.9s;
+    animation-delay: -0.9s;
+}
+
+.container2 .circle2 {
+    -webkit-animation-delay: -0.8s;
+    animation-delay: -0.8s;
+}
+
+.container3 .circle2 {
+    -webkit-animation-delay: -0.7s;
+    animation-delay: -0.7s;
+}
+
+.container1 .circle3 {
+    -webkit-animation-delay: -0.6s;
+    animation-delay: -0.6s;
+}
+
+.container2 .circle3 {
+    -webkit-animation-delay: -0.5s;
+    animation-delay: -0.5s;
+}
+
+.container3 .circle3 {
+    -webkit-animation-delay: -0.4s;
+    animation-delay: -0.4s;
+}
+
+.container1 .circle4 {
+    -webkit-animation-delay: -0.3s;
+    animation-delay: -0.3s;
+}
+
+.container2 .circle4 {
+    -webkit-animation-delay: -0.2s;
+    animation-delay: -0.2s;
+}
+
+.container3 .circle4 {
+    -webkit-animation-delay: -0.1s;
+    animation-delay: -0.1s;
+}
+
+@-webkit-keyframes bouncedelay {
+
+    0%,
+    80%,
+    100% {
+        -webkit-transform: scale(0.0)
+    }
+
+    40% {
+        -webkit-transform: scale(1.0)
+    }
+}
+
+@keyframes bouncedelay {
+
+    0%,
+    80%,
+    100% {
+        transform: scale(0.0);
+        -webkit-transform: scale(0.0);
+    }
+
+    40% {
+        transform: scale(1.0);
+        -webkit-transform: scale(1.0);
+    }
+}
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/css/public.css
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/css/public.css
@@ -0,0 +1,59 @@
+
+.relative {
+    position: relative;
+}
+.absolute {
+    position: absolute;
+}
+
+.footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    font-size: 0;
+    background: #fff;
+    border-top: 1px solid #fff;
+    z-index: 999;
+}
+.footer li {
+    text-align: center;
+}
+.footer img {
+    width: 0.6rem;
+    height: 0.6rem;
+}
+.footer p {
+    width: 0.6rem;
+    height: 0.6rem;
+    font-size: 0.2rem;
+    zoom: 0.9;
+    margin-left: 0.06rem;
+}
+.footer_active p{
+    color: #f15a4f;
+}
+.title {
+    font-size: 0.6rem;
+    font-weight: 600;
+    color: #333;
+    line-height: 0.72rem;
+    margin-bottom: 0.32rem;
+}
+.padding_16 {
+    padding-left: 0.32rem;
+    padding-right: 0.32rem;
+}
+
+.margin_16 {
+    margin-left: 0.32rem;
+    margin-right: 0.32rem;
+}
+
+.clear_size {
+    font-size: 0;
+}
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/css/scerth.css
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/css/scerth.css
@@ -0,0 +1,106 @@
+body{
+   background: #f5f5f5;}
+.hader{font-size: 0;
+    width: 100%;
+    height: 0.88rem;
+    position: fixed;
+    z-index: 999;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 0.02rem solid #f0f0f0;
+    background: #ffffff;
+
+}
+.hader a{
+    height: 0.88rem;
+    width: 1.2rem;
+    display:flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+.hader a i{
+    margin-left: 0.6rem;
+    background: url("../img/left.png");
+    display:inline-block ;
+    width:0.6rem;
+    height: 1.2rem;
+    zoom: 0.3;
+    background-repeat:no-repeat;
+    background-size: 100%;
+
+}
+.caipu{
+    height: 0.64rem;
+    background: #eee;
+    border-radius: 0.04rem;
+    color: #333;
+    font-size: 0.28rem;
+    width: 4.8rem;
+    line-height: 0.48rem;
+    padding-left: 0.12rem;
+margin-left: -0.3rem;
+}
+.ser{
+    margin-right: 0.3rem;
+    height: 0.64rem;
+    background: #ff4c39;
+    border-radius: 0.04rem;
+    color: #fff;
+    font-size: 0.28rem;
+    box-sizing: border-box;
+    line-height: 0.64rem;
+    text-align: center;
+    width: 1.1rem;
+}
+.contter{
+padding-top: 45px;
+}
+.contter_top{
+
+    background: #ffffff;
+}
+.contter p{
+    height: 1.28rem;
+    font-size: 0.32rem;
+    color: #666;
+    line-height: 1.28rem;
+}
+.list{
+    padding: 0px 15px 15px 15px;
+}
+.list li{
+    padding-top: 15px;
+    border-bottom: 1px solid rgba(0,0,0,0.05);
+}
+.list li:after{
+    content: "";
+    height: 15px;
+    display: inline-block;
+    border-bottom: 1px solid rgba(0,0,0,0.05);
+}
+
+.list li a{
+display: flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+.list li img{
+   width: 120px;
+    height: 100px;
+    margin-right: 15px;
+}
+.li_left h3{
+    font-size: 18px;
+    color: #333;
+    font-weight: 300;
+    padding: 2px 0px 0px;
+
+}
+.li_left p{
+    font-size: 14px;
+    color: #999;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+}
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/css/sort.css
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/css/sort.css
@@ -0,0 +1,120 @@
+.header{
+    width: 100%;
+    height: 1.44rem;
+    position: fixed;
+    left: 0rem;
+    top: 0rem;
+    background: #fff;
+    z-index: 999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0;
+}
+.header_search{
+    display: flex;
+    align-items: center;
+    height: 0.8rem;
+    background: #f5f5f5;
+    width: 6.864rem;
+    border-radius: 0.08rem;
+    position: relative;
+}
+.header_search .scerch{
+    background: url("../img/search.png");
+    display: inline-block;
+    background-size: 0.32rem 0.32rem;
+    width: 0.32rem;
+    height: 0.32rem;
+    position: absolute;
+left: 0.2rem;
+    font-size: 0.28rem;
+    zoom: 1.5;
+}
+.content{
+    margin-top: 1.44rem;
+
+}
+.header_search input{
+    padding-left: 0.66rem;
+    background: none;
+    border: 0rem;
+    width: 6.6rem;
+    font-size: 0.28rem;
+    height: 0.8rem;
+    margin-left: 10px;
+}
+.content_left{
+    height: 100%;
+    width: 1.6rem;
+    position: fixed;
+    left: 0rem;
+    bottom: 0rem;
+    z-index: 210;
+    background: #f5f5f5;
+    padding-bottom: 1.02rem;
+    box-sizing: border-box;
+
+}
+.content_left_list{
+    margin-top: 1.44rem;
+    overflow: hidden;
+    overflow-y: overlay;
+    height: 100%;
+
+
+}
+.content_left_list li{
+    padding-top: 0.2rem;
+    padding-bottom: 0.2rem;
+}
+.list_a{
+    display: flex;
+    justify-content: center;
+    flex-direction:column;
+    align-items: center;
+}
+.list_a i{
+    background: url("../img/2019.png");
+    display: inline-block;
+    height: 0.5rem;
+    width: 0.5rem;
+    background-size: 0.5rem 10rem;
+
+}
+.list_span{
+    line-height: 0.48rem;
+    color: #333;
+    font-size: 0.24rem;
+}
+.content_right{
+   margin-left: 1.6rem;
+    padding-left: 0.12rem;
+    padding-right: 0.12rem;
+
+}
+.content_right_list{
+display: flex;
+    align-items: center;
+    flex-wrap:wrap;
+    overflow: hidden;
+    overflow-y: overlay;
+    height: 100%;
+}
+.content_right_list li{
+    width: 33.33333333%;
+}
+.content_right_list li a{
+    display: flex;
+    align-items: center;
+    flex-direction:column;
+    padding: 0rem 0.12rem;
+}
+.content_right_list_img{
+width: 1.24rem;
+    height: 1.24rem;
+}
+.content_right_list_span{
+    font-size: 0.24rem;
+    color: #333;
+}
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/css/swiper.css
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/css/swiper.css
@@ -0,0 +1,42 @@
+.swiper-wrapper .swiper-slide {
+    float: left;
+}
+.swiper-container {
+    overflow: hidden;
+    position: relative;
+}
+.swiper-pagination {
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+.swiper-dot {
+    width: 7px;
+    height: 7px;
+    background: #fff;
+    border-radius: 100%;
+    margin-right: 5px;
+    float: left;
+}
+.swiper-button-prev,
+.swiper-button-next {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #fff;
+    font-size: 30px;
+    cursor: pointer;
+}
+.swiper-button-prev {
+   left: 10px;
+}
+.swiper-button-next {
+    right: 10px;
+}
+.swiper-wrapper {
+    position: relative;
+}
+.swiper-active {
+    background: red !important;
+}
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/css/type.css
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/css/type.css
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/css/video.css
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/css/video.css
@@ -0,0 +1,135 @@
+
+.header{
+    width: 100%;
+    height: 0.88rem;
+    position: fixed;
+    z-index: 999;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 0.02rem solid #f5f5f5;
+    background: #fff;
+}
+.header_left{
+    padding-left: 0.32rem;
+    display: flex;
+    align-items: center;
+}
+.header_left span{
+    font-size: 0.3rem;
+    color: #333;
+    margin-bottom: 0.06rem;
+}
+.header_left_img{
+    width: 0.2rem;
+    height: 0.34rem;
+    margin-right: 0.12rem;
+}
+.header h1{
+    font-size: 0.36rem;
+    color: #000;
+    padding-right: 0.32rem;
+    margin-bottom: 0.06rem;
+}
+.header_left_search{
+    height: 0.88rem;
+    width: 0.88rem;
+}
+
+.content_title{
+    display: flex;
+    flex-direction:row;
+    flex-wrap:wrap;
+    padding:0.88rem 0.22rem 0.3rem 0.22rem;
+    font-size: 0;
+    justify-content: space-between;
+}
+.food{
+
+    margin-top: 0.3rem;
+    width: 3.4rem;
+    box-shadow:0.02rem 0.02rem 0.18rem #888888;
+    border-radius: 0.14rem;
+
+
+}
+.content_img{
+    height: 4.44rem;
+    position: relative;
+    border-top-left-radius:0.14rem;
+    border-top-right-radius:0.14rem;
+    background-position: center;
+
+
+}
+.content_img_1{
+    height: 4.44rem;
+    border-top-left-radius: 0.14rem;
+    border-top-right-radius: 0.14rem;
+    width: 100%;
+}
+.content_img_play{
+    background: url("../img/20181206143142_460.png");
+    display: inline-block;
+    background-position:0rem 0rem;
+    width: 0.4rem;
+    height: 0.4rem;
+    background-size: 0.4rem 0.8rem;
+    position: absolute;
+    top: 0.2rem;
+    right: 0.2rem;
+    z-index: 99;
+}
+.content{
+    width: 100%;
+    margin-bottom: 1.1rem;
+}
+.content_font{
+    padding-left: 0.2rem;
+    padding-right: 0.2rem;
+    padding-bottom: 0.24rem;
+}
+.content_font .title{
+    font-size: 0.32rem;
+    font-weight: 600;
+    padding: 0.2rem 0rem 0rem 0rem;
+    line-height: 1;
+}
+.content_font_below{
+    margin: 0.4rem 0rem 0rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.content_font_below_left{
+    display: flex;
+    align-items: center;
+
+
+}
+.content_font_below_left span{
+    font-size: 0.18rem;
+    color: #666;
+    padding-left: 0.1rem;
+}
+.content_font_below_left img{
+    width: 0.36rem;
+    height: 0.36rem;
+    border-radius: 100%;
+}
+.content_font_below_right{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.content_font_below_right .view{
+    background: url("../img/20181206143142_460.png");
+    display: inline-block;
+    background-position:-0.08rem -0.4rem;
+    width: 0.26rem;
+    height: 0.2rem;
+    background-size: 0.4rem 0.8rem;
+}
+.content_font_below_right_span{
+    font-size: 0.24rem;
+}
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/css/video_detailed.css
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/css/video_detailed.css
@@ -0,0 +1,67 @@
+.content{
+    font-size: 0;
+    margin-bottom: 0.6rem;
+    border-bottom: 0.02rem solid #f1f1f1;
+}
+.video_top{
+    width: 100%;
+    height: 4.221rem;
+}
+.content_font{
+    padding: 0.2rem 0.42rem 0;
+
+;
+}
+.content_font a h3{
+    font-size: 0.48rem;
+}
+.content_font_span{
+    padding: 0.14rem 0 0.34rem;
+    border-bottom: 0.02rem solid #f1f1f1;
+}
+.content_font_span span{
+    font-size: 0.26rem;
+    color: #999;
+    padding-right: 0.16rem;
+}
+.user{
+    padding: 0.24rem 0;
+    display: flex;
+    align-items: center;
+
+
+}
+.user img{
+    width: 0.92rem;
+    height: 0.92rem;
+    border-radius: 100%;
+}
+.user_right p{
+    font-size: 0.26rem;
+}
+.user_right{
+    margin-left: 0.2rem;
+}
+.user_right p span{
+    margin-left: 0.18rem;
+    font-size: 0.24rem;
+    padding: 0.02rem 0.04rem 0.04rem;
+    border: 0.02rem solid #b2d5f3;
+    color: #2a9aff;
+    display: inline-block;
+    line-height: 1;
+}
+.user_p{
+   margin-top: 0.1rem;
+    font-size: 0.26rem;
+    color: #999;
+}
+.content_font h3{
+    font-size: 0.32rem;
+    color: #333;
+    padding-bottom: 0.2rem;
+    margin-top: 0.1rem;
+}
+.content_c{ font-size: 0.32rem;
+    color: #333;
+    line-height: 0.54rem;}
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/img/20181206143142_460.png
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/img/20181206143142_460.png
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/img/2019.png
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/img/2019.png
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/img/fl_sancan_1.png
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/img/fl_sancan_1.png
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/img/foder.jpg
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/img/foder.jpg
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/img/home.png
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/img/home.png
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/img/home_active.png
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/img/home_active.png
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/img/img1.png
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/img/img1.png
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/img/img2.png
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/img/img2.png
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/img/img3.png
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/img/img3.png
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/img/img4.png
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/img/img4.png
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/img/img5.png
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/img/img5.png
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/img/left.png
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/img/left.png
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/img/like.png
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/img/like.png
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/img/like_active.png
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/img/like_active.png
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/img/search.png
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/img/search.png
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/img/type.png
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/img/type.png
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/img/user.jpg
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/img/user.jpg
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/img/video.png
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/img/video.png
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/ajax/ajax.js
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/ajax/ajax.js
@@ -0,0 +1,75 @@
+class Ajax {
+
+  constructor () {
+    this.http = new XMLHttpRequest();
+  }
+
+  get(option) {
+    Tips.loading()
+    var params = ""
+    for (const key in option.data) {
+      params+= `&${key}=${option.data[key]}`
+    }
+    params = params.replace("&", "?")
+    option.url = this.url() + option.url + params
+
+    return new Promise( (resolve, reject) => {
+
+      this.http.open("GET", option.url);
+      this.http.send()
+      return this.onreadystatechange(resolve, reject)
+    })
+  }
+
+  post(option) {
+    this.http.open("POST", option.url);
+    this.http.setRequestHeader('Content-Type', 'application/josn');
+    this.http.send(JSON.stringify(option.data))
+    this.onreadystatechange(option)
+  }
+
+
+  onreadystatechange(resolve, reject) {
+    this.http.onreadystatechange = () => {
+      if (this.http.readyState == 4) {
+        Tips.close()
+        if (this.http.status == 200) {
+          var res = JSON.parse(this.http.response);
+          switch (res.status) {
+            case 200:
+              resolve(res.result);
+              break;
+
+            case 404:
+              Tips.dialog({
+                title: '程序出错啦',
+                message: res.msg
+              });
+              throw new Error(res.msg);
+              break;
+
+          }
+          resolve()
+        }  else {
+          reject(this.http)
+        }
+      }
+    }
+  }
+
+  url() {
+    switch (config.stage) {
+      case "dev":
+        return config.devUrl;
+        break;
+      case "test":
+        return config.testUrl;
+        break;
+      case "prod":
+        return config.prodUrl;
+        break;
+    }
+  }
+}
+
+var ajax = new Ajax()
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/config/config.js
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/config/config.js
@@ -0,0 +1,18 @@
+var config = {
+  devUrl: 'http://127.0.0.1:3000/api',
+  testUrl: 'http://test.com/api/json',
+  prodUrl: 'http://prod.com/api/json',
+  stage: 'dev',
+  urlList: {
+    index: '/index',
+    banner: '/index/banner',
+    threeMeals: '/index/threeMeals',
+    type: '/index/class',
+    video:'/video/list',
+    info:'/index/info',
+    bannerInfo:'/index/bannerInfo',
+    typeLeft:'/type/leftMenu',
+    typeRight:'/type/rightMenu',
+    search:'/search/list'
+  }
+}
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/lib/loading.js
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/lib/loading.js
@@ -0,0 +1,150 @@
+/**
+ * 封装加载提示
+ */
+class Loading {
+    /**
+     * 加载进度
+     */
+    loading() {
+        this.SetLoading()
+        // 塞入loading的html
+        this.$(".isShow .loading").innerHTML = 
+        `
+            <div class="back">
+                <div class="load8">
+                    <div class="load8-container container1">
+                        <div class="circle1"></div>
+                        <div class="circle2"></div>
+                        <div class="circle3"></div>
+                        <div class="circle4"></div>
+                    </div>
+                    <div class="load8-container container2">
+                        <div class="circle1"></div>
+                        <div class="circle2"></div>
+                        <div class="circle3"></div>
+                        <div class="circle4"></div>
+                    </div>
+                    <div class="load8-container container3">
+                        <div class="circle1"></div>
+                        <div class="circle2"></div>
+                        <div class="circle3"></div>
+                        <div class="circle4"></div>
+                    </div>
+                </div>                 
+            </div>
+        `;
+        this.$(".isShow .back").style = `padding: 0.4rem;`
+        this.show()
+    }
+
+    /**
+     * 显示toast提示
+     * @param {*} text 文字
+     * @param {*} time 自动关闭提示的时间 默认3秒
+     */
+    toast(text, time = 3000) {
+        this.SetLoading()
+        this.$(".isShow .loading").innerHTML = `<div class="back"></div>`
+        // 设置边距
+        this.$(".isShow .back").style = `padding: 0.14rem 0.4rem;`
+
+        // 设置内容
+        this.$(".isShow .back").innerHTML = `<span>${text}</span>`;
+        this.show()
+        setTimeout(()=> this.close(),time)
+    }
+
+    /**
+     * 弹出框 dialog
+     * @param {*} params 
+     */
+    dialog(params) {
+        params == undefined ? params = {} : null;
+        let defaultParams = { title: '标题', message: '内容', 
+            cancelText: '取消', confirmText: '确定', 
+            cancelColor: '#323233', confirmColor: '#fb7299'
+        };
+
+        defaultParams.title = params.title ||  defaultParams.title;
+        defaultParams.message = params.message ||  defaultParams.message;
+        defaultParams.cancelText = params.cancelText ||  defaultParams.cancelText;
+        defaultParams.confirmText = params.confirmText ||  defaultParams.confirmText;
+        defaultParams.cancelColor = params.cancelColor ||  defaultParams.cancelColor;
+        defaultParams.confirmColor = params.confirmColor ||  defaultParams.confirmColor;
+  
+        this.SetLoading()
+        this.$(".isShow .loading").innerHTML = `
+            <div class="dialog_f">
+              <div class="dialog_header">${defaultParams.title}</div>
+              <div class="dialog_content">
+                <div class="dialog_message">${defaultParams.message}</div>
+              </div>
+              <div class="dialog_footer">
+                <div class="dialog_cancel" style="color:${defaultParams.cancelColor}">
+                    ${defaultParams.cancelText}
+                </div>
+                <div class="dialog_confirm" style="color:${defaultParams.confirmColor}">
+                    ${defaultParams.confirmText}
+                </div>
+              </div>
+            </div>
+        `;
+        // 取消按钮被点击的时候
+        this.$(".isShow .dialog_cancel").onclick = () => {
+            params.cancel && params.cancel()
+            this.close()
+        }
+         // 确定按钮被点击的时候
+         this.$(".isShow .dialog_confirm").onclick = () => {
+            params.confirm && params.confirm()
+            this.close()
+        }
+        this.$(".isShow .loading").style = 'background: rgba(0, 0, 0, 0.7)'
+        this.show()
+    }
+
+    /**
+     * 填充loading的html结构
+     */
+    SetLoading () {
+        if (this.$(".isShow") == null) {
+            var isShow = document.createElement("div")
+            isShow.className = "isShow"
+            isShow.style = "display: none;"
+
+            var loading = document.createElement("div")
+            loading.className = "loading";
+            isShow.appendChild(loading)
+            this.$("body").appendChild(isShow)
+        }
+    }
+   
+    /**
+     * 删除内容，隐藏弹窗
+     */
+    close() {
+        this.clearContent()
+        this.$(".isShow").style.display = "none"
+    }
+
+    /**
+     * 显示弹窗
+     */
+    show() {
+        this.$(".isShow").style.display = "block"
+    }
+
+    /**
+     * 清空弹窗内部的内容
+     */
+    clearContent() {
+        this.$(".isShow .loading").style = "";
+        this.$(".isShow .loading").innerHTML = "";
+    }
+
+    $(className) {
+        return document.querySelector(className);
+    }
+}
+
+var Tips = new Loading()
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/lib/previewImage.js
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/lib/previewImage.js
@@ -0,0 +1,267 @@
+class PreviewImage {
+
+    // 属性都是全局的
+    body = this.$("body");
+    option = {};
+    isBackMove = false;
+
+    x1 = 0;
+    y1 = 0;
+    l = 0;
+    t = 0;
+
+    constructor(option) {
+        if (!option.hasOwnProperty("image")) {
+            throw new Error("参数image缺少，请检查")
+        }
+
+        if (!option.hasOwnProperty("showIndex")) {
+            throw new Error("参数showIndex缺少，请检查")
+        }
+
+        this.option = option
+        console.log(this.option);
+
+        this.created();
+        this.BindClose();
+
+        this.BindPrevious();
+        this.BindNext();
+        this.BindSuoXiao();
+        this.BindFangDa();
+        this.BindFullScreen();
+
+        this.BindXuanZhuan();
+        this.MouseEvent();
+    }
+
+    // 1：把图片预览的html插入到网页上
+    created() {
+        this.body.insertAdjacentHTML("beforeend", `<div class="previewImage">
+                        <div class="zhezhao"></div>
+                        <div class="preview">
+                            <div class="closed">x</div>
+
+                            <div class="action">
+                                <div class="left d">&lt;</div>
+                                <div class="right d">&gt;</div>
+                            </div>
+
+                            <img class="mainImg" style="transform: scale(1) rotate(0deg);margin-left: 0;margin-top: 0;"
+                                src="${this.option.image[this.option.showIndex]}" alt="">
+
+                            <ul class="operation">
+                                <li>
+                                    <i class="iconfont icon-suoxiao suoxiao"></i>
+                                </li>
+                                <li>
+                                    <i class="iconfont icon-fangda fangda"></i>
+                                </li>
+                                <li>
+                                    <i class="iconfont icon-fullscreen fullscreen"></i>
+                                </li>
+                                <li class="xz">
+                                    <i class="iconfont icon-shuaxin leftshuaxin"></i>
+                                </li>
+                                <li>
+                                    <i class="iconfont icon-shuaxin rightshuaxin"></i>
+                                </li>
+                            </ul>
+
+
+                        </div>
+                    </div>`)
+
+    }
+
+    // 缩小
+    BindSuoXiao() {
+        this.$(".suoxiao").onclick = () => {
+            var value = this.Scale() - 0.2;
+            if (value != 0) {
+                this.$(".mainImg").style.transform = `scale(${value}) rotate(${this.Rotate()}deg)`
+            }
+        }
+    }
+
+    // 全屏
+    BindFullScreen() {
+
+        this.$(".fullscreen").onclick = () => {
+            // true 缩小
+            if (this.$(".fullscreen").classList.contains("icon-fullscreen")) {
+                this.$(".fullscreen").classList.remove("icon-fullscreen")
+                this.$(".fullscreen").classList.add("icon-suoxiao1")
+
+                this.$(".mainImg").style = `
+                    transform: scale(2) rotate(${this.Rotate()}deg);
+                    margin-left: 0;
+                    margin-top: 0;
+                `
+
+            // 放大
+            } else {
+                this.$(".fullscreen").classList.remove("icon-suoxiao1")
+                this.$(".fullscreen").classList.add("icon-fullscreen")
+
+                this.$(".mainImg").style = `
+                    transform: scale(1) rotate(0deg);
+                    margin-left: 0;
+                    margin-top: 0;
+                `
+            }
+        }
+    }
+
+    // 放大
+    BindFangDa() {
+        this.$(".fangda").onclick = () => {
+            this.$(".mainImg").style.transform = `scale(${this.Scale() + 0.2}) rotate(${this.Rotate()}deg)`
+        }
+    }
+
+    // 旋转
+    BindXuanZhuan() {
+        // -90
+        this.$(".leftshuaxin").onclick = () => {
+            this.xuanzhuan(-90)
+        }
+
+        // +90
+        this.$(".rightshuaxin").onclick = () => {
+            this.xuanzhuan(90)
+        }
+    }
+
+    MouseEvent() {
+
+        // 鼠标滑动的时候放大缩小网页
+        document.onmousewheel = (e) => {
+            if (e.wheelDelta == 210) {
+                this.$(".fangda").onclick()
+            } else {
+                this.$(".suoxiao").onclick()
+            }
+        }
+
+        // document.addEventListener('mousewheel',(e) => {
+        //     if (e.wheelDelta == 210) {
+        //         this.$(".fangda").onclick()
+        //     } else {
+        //         this.$(".suoxiao").onclick()
+        //     }
+        // },false)
+
+        // 鼠标在图片上按下的时候
+        this.$(".mainImg").onmousedown = (e) => {
+
+            e.preventDefault()
+
+            this.isBackMove = true
+
+            //获取鼠标按下的坐标
+            this.x1 = e.clientX;
+            this.y1 = e.clientY;
+
+            this.l = parseInt(this.$(".mainImg").style.marginLeft);
+            this.t = this.$(".mainImg").offsetTop;
+
+            this.ImgMove(".mainImg")
+        }
+        // 按住拖动，但鼠标从图片上离开的
+        // 给背景层绑定鼠标移动事件
+        this.$(".mainImg").onmouseleave = () => {
+            console.log("鼠标从图片上离开的，给背景层绑定鼠标移动事件");
+            if (this.isBackMove) {
+                this.ImgMove(".preview")
+            }
+        }
+
+        // 鼠标在背景层上松开
+        this.$(".preview").onmouseup = (ev) => {
+            console.log("鼠标在背景层上松开");
+            this.isBackMove = false
+            this.$(".mainImg").onmousemove = null;
+            this.$(".preview").onmousemove = null;
+        }
+
+        // 鼠标在图片上松开
+        this.$(".mainImg").onmouseup = (ev) => {
+            console.log("鼠标在图片上松开");
+            this.$(".mainImg").onmousemove = null;
+            this.$(".preview").onmousemove = null;
+        }
+    }
+
+    ImgMove(className) {
+        this.$(className).onmousemove = (ev) => {
+            var x2 = ev.clientX;
+            var y2 = ev.clientY;
+
+            //计算出鼠标的移动距离
+            var x = x2 - this.x1;
+            var y = y2 - this.y1;
+
+            //移动的数值与元素的left，top相加，得出元素的移动的距离
+            var lt = y + this.t;
+            var ls = x + this.l;
+
+            //更改元素的left，top值
+            this.$(".mainImg").style.marginLeft = ls + 'px';
+            this.$(".mainImg").style.marginTop = lt + 'px';
+        }
+    }
+
+    xuanzhuan(offset) {
+        this.$(".mainImg").style.transform = `scale(${this.Scale()}) rotate(${this.Rotate() + offset}deg)`
+    }
+
+    // 关闭按钮
+    BindClose() {
+        //1  var ddddc = this;
+
+        //2 es6 => 箭头函数
+        console.log("this1: ", this);
+
+        // this 指向
+        this.$(".closed").onclick = () => {
+            this.body.removeChild(this.$(".previewImage"))
+        }
+    }
+
+    // 上一页
+    BindPrevious() {
+        this.$(".left").onclick = () => {
+            this.option.showIndex -= 1;
+            if (this.option.showIndex < 0) {
+                this.option.showIndex = this.option.image.length - 1
+            }
+            this.$(".mainImg").src = this.option.image[this.option.showIndex]
+        }
+    }
+
+    // 下一页
+    BindNext() {
+        this.$(".right").onclick = () => {
+            this.option.showIndex += 1;
+            if (this.option.showIndex > this.option.image.length - 1) {
+                this.option.showIndex = 0
+            }
+            this.$(".mainImg").src = this.option.image[this.option.showIndex]
+        }
+    }
+
+    Scale() {
+        return Number(this.$(".mainImg").style.transform.match(/scale\(([\s\S]*?)\) /)[1])
+    }
+
+    Rotate() {
+        return Number(this.$(".mainImg").style.transform.match(/rotate\(([\s\S]*?)deg\)/)[1])
+    }
+
+    $(className) {
+        return document.querySelector(className)
+    }
+
+
+}
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/lib/rem.js
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/lib/rem.js
@@ -0,0 +1,11 @@
+window.onload = function () {
+  getRem(750, 100)
+};
+window.onresize = function () {
+  getRem(750, 100)
+};
+function getRem(pwidth, prem) {
+  var html = document.getElementsByTagName("html")[0];
+  var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
+  html.style.fontSize = oWidth / pwidth * prem + "px";
+}
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/lib/swiper.js
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/lib/swiper.js
@@ -0,0 +1,330 @@
+(function () {
+    /**
+     * 构造函数
+     * @param {*} ParentElement 父节点的选择器名称
+     * @param {*} Configuration 插件的自定义设置项
+     */
+    function Swiper(ParentElement, Configuration) {
+        // 默认参数
+        // slideChangeTransitionStart【完成】
+        // slideTo【完成】
+        this.defaultConf = {
+            reverse: false,
+            timer: '', // 保存自动播放的定时器
+            ParentElement: '.swiper-container',
+            wrapper: '.swiper-wrapper',
+            slide: '.swiper-slide',
+            config: {
+                loop: false, // 是否开启循环播放【完成】
+                time: 1,     // 自动播放的间隔事件【完成】
+                speed: 300,  // 切换轮播图时候用的时间【完成】
+                grabCursor: false, // 鼠标放到轮播图上是否显示为 小手【完成】
+                initialSlide: 0, // 默认显示第一个【完成】
+                auto: false, // 是否开启自动播放【完成】
+            },
+            // 小圆点的父标签选择器名称
+            pagination: {
+                el: '.swiper-pagination',
+            },
+            navigation: {
+                nextEl: '.swiper-button-next', // 下一页
+                prevEl: '.swiper-button-prev', // 上一页
+            },
+        }
+
+        this.defaultConf.ParentElement = ParentElement || this.defaultConf.ParentElement;
+        this.defaultConf.config.loop = Configuration.loop || this.defaultConf.config.loop;
+        this.defaultConf.config.time = Configuration.time || this.defaultConf.config.time;
+        this.defaultConf.config.speed = Configuration.speed || this.defaultConf.config.speed;
+        this.defaultConf.config.grabCursor = Configuration.grabCursor || this.defaultConf.config.grabCursor;
+        this.defaultConf.config.initialSlide = Configuration.initialSlide || this.defaultConf.config.initialSlide;
+        this.defaultConf.config.auto = Configuration.auto || this.defaultConf.config.auto;
+        this.defaultConf.wrapper = Configuration.wrapper || this.defaultConf.wrapper;
+        this.defaultConf.slide = Configuration.slide || this.defaultConf.slide;
+
+        this.slideArr = this._(`${this.defaultConf.wrapper} ${this.defaultConf.slide}`);
+
+        // 最外层 swiper-container 宽度
+        this.f = this.$(this.defaultConf.ParentElement).offsetWidth;
+        // 判断小圆点
+        if (Configuration.hasOwnProperty("pagination")) {
+            this.defaultConf.pagination.el = Configuration.pagination.el;
+            this.RenderDot()
+        }
+
+        // 判断使用自定义前进后退按钮
+        if (Configuration.hasOwnProperty("navigation")) {
+            this.RenderNavigation()
+            //判断下一页按钮的名称是否自定义
+            if (Configuration.navigation.hasOwnProperty("nextEl")) {
+                this.defaultConf.navigation.nextEl = Configuration.navigation.nextEl;
+            }
+            //判断上一页按钮的名称是否自定义
+            if (Configuration.navigation.hasOwnProperty("prevEl")) {
+                this.defaultConf.navigation.prevEl = Configuration.navigation.prevEl;
+            }
+        }
+
+        this.UserConfig = Configuration
+        this.init()
+    }
+
+
+    // 类的方法
+    Swiper.prototype = {
+        init: function () {
+            this.SetWrapperWidth();
+            this.defaultConf.config.auto ? this.AutoPlay() : '';
+            this.initSwiperSlide()
+        },
+        // 设置swiper-slide父类的宽度
+        SetWrapperWidth: function () {
+
+            // 计算swiper-slide的宽度
+            this.slideArr.forEach(v => v.style.width = `${this.f}px`)
+            this.$(this.defaultConf.wrapper).style = `
+                width: ${this.f * this.slideArr.length}px;
+                left: -${this.f * this.defaultConf.config.initialSlide}px;
+                transition: all ease ${this.defaultConf.config.speed / 1000}s;
+                cursor: ${this.defaultConf.config.grabCursor ? 'pointer' : ''} ;
+            `
+        },
+
+        /**
+         * 注册移动端滑动
+         */
+        initSwiperSlide: function () {
+            var fa = this.$(this.defaultConf.ParentElement),
+                startX = 0,
+                startY = 0;
+
+            fa.addEventListener('touchstart', function (e) {
+                e.stopPropagation()
+                startX = e.targetTouches[0].pageX
+                startY = e.targetTouches[0].pageY
+            })
+
+            var getDirection = function (startx, starty, endx, endy) {
+                // 获得角度
+                var getAngle = function(angx, angy) {
+                    return Math.atan2(angy, angx) * 180 / Math.PI;
+                };
+
+                var angx = endx - startx;
+                var angy = endy - starty;
+                var result = 0;
+
+                // 如果滑动距离太短
+                if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
+                    return result;
+                }
+
+                var angle = getAngle(angx, angy);
+                if (angle >= -135 && angle <= -45) {
+                    result = 1;
+                } else if (angle > 45 && angle < 135) {
+                    result = 2;
+                } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
+                    result = 3;
+                } else if (angle >= -45 && angle <= 45) {
+                    result = 4;
+                }
+
+                return result;
+            }
+
+            fa.addEventListener('touchmove', (e) => {
+                e.stopPropagation()
+                var endX = e.changedTouches[0].pageX;
+                var endY = e.changedTouches[0].pageY;
+                
+                var direction = getDirection(startX, startY, endX, endY);
+                if (direction == 3 || direction == 4) {
+                    var x = parseInt(endX - startX) - 40
+                    this.$(this.defaultConf.wrapper).style.webkitTransform = `translate3d(${x}px,0px,0px)`;
+                }
+            });
+
+            fa.addEventListener('touchend', (e) => {
+                e.stopPropagation()
+                var endX = e.changedTouches[0].pageX;
+                var endY = e.changedTouches[0].pageY;
+
+                var direction = getDirection(startX, startY, endX, endY);
+
+                switch (direction) {
+                    case 0:
+                        console.log("未滑动！");
+                        break;
+                    case 1:
+                        console.log("向上！")
+                        break;
+                    case 2:
+                        console.log("向下！")
+                        break;
+                    case 3:
+                        this.$(this.defaultConf.wrapper).style.webkitTransform = `translate3d(0px,0px,0px)`;
+                        this.animation(-this.f)
+                        this.CallMethods()
+                        this.UserConfig.pagination && this.ChangeDotActive()
+                        console.log("向左！")
+                        break;
+                    case 4:
+                        this.$(this.defaultConf.wrapper).style.webkitTransform = `translate3d(0px,0px,0px)`;
+                        this.animation(this.f)
+                        this.CallMethods()
+                        this.UserConfig.pagination && this.ChangeDotActive()
+                        console.log("向右滑动");
+                        break;
+                    default:
+                }
+            })
+        },
+
+        CallMethods() {
+            if (this.UserConfig.hasOwnProperty("on")) {
+                var TotalLeft = Math.abs(parseInt(this.$(this.defaultConf.wrapper).style.left));
+                index = TotalLeft / this.f;
+                // 实现调用用户传入的方法，返回下标给用户
+                this.UserConfig.on && this.UserConfig.on.slideChangeTransitionStart(index)
+            }
+        },
+
+        // 生成小圆点
+        RenderDot: function () {
+            this.slideArr.forEach((v, i) => {
+                this.$(this.defaultConf.pagination.el).innerHTML +=
+                    `
+                    <div class="swiper-dot ${i == 0 ? 'swiper-active' : ''}"></div>
+                `
+            });
+
+            var Dot = this._(`${this.defaultConf.pagination.el} .swiper-dot`);
+            Dot.forEach((v, i) => {
+                v.onclick = () => {
+                    this.UserConfig.pagination && this.ChangeDotActive(i)
+                    this.$(this.defaultConf.wrapper).style.left = `-${i * this.f}px`;
+                }
+            })
+        },
+
+        // 渲染左右前进后退按钮
+        RenderNavigation: function () {
+            var prev = this.$(this.defaultConf.navigation.prevEl);
+            var next = this.$(this.defaultConf.navigation.nextEl);
+            prev.innerText = "<";
+            next.innerText = ">";
+            this.BindNavigationClick(prev, next)
+        },
+
+        // 为上一页下一页按钮绑定切换事件
+        BindNavigationClick() {
+            // var a = this
+            // 下一页
+            this.$(this.defaultConf.navigation.nextEl).onclick = () => {
+                this.animation(-this.f)
+                this.UserConfig.pagination && this.ChangeDotActive()
+            }
+            // 上一页
+            this.$(this.defaultConf.navigation.prevEl).onclick = () => {
+                this.animation(this.f)
+                this.UserConfig.pagination && this.ChangeDotActive()
+            }
+        },
+
+        // 切换动画
+        animation(offset) {
+            var swiperWrapper = this.$(this.defaultConf.wrapper);
+            var y = parseInt(swiperWrapper.style.left) + offset,
+                max = -(this.f * (this.slideArr.length - 1));
+
+            // 如果时最后一张图    
+            if (y < max) {
+                if (this.defaultConf.config.loop) {
+                    swiperWrapper.style.left = "0px";
+                } else if (this.defaultConf.config.auto) {
+                    this.defaultConf.reverse = true
+                    this.animation(this.f)
+                }
+                return;
+
+                // 判断是不是第一张图    
+            } else if (y > 0) {
+                if (this.defaultConf.config.loop == false && this.defaultConf.config.auto) {
+                    this.defaultConf.reverse = false
+                    swiperWrapper.style.left = `${y - this.f * 2}px`
+                }
+                if (this.defaultConf.config.loop) {
+                    swiperWrapper.style.left = `${max}px`
+                }
+                return
+            } else {
+                if (this.defaultConf.config.loop == false
+                    && this.defaultConf.config.auto
+                    && this.defaultConf.reverse) {
+                    swiperWrapper.style.left = `${y}px`
+                } else {
+                    swiperWrapper.style.left = `${y}px`
+                }
+
+            }
+        },
+
+        ChangeDotActive(type = null) {
+            var Dot = this._(`${this.defaultConf.pagination.el} .swiper-dot`);
+            var index = "";
+            if (type == null) {
+                var TotalLeft = Math.abs(parseInt(this.$(this.defaultConf.wrapper).style.left));
+                index = TotalLeft / this.f;
+            } else {
+                index = type;
+            }
+
+            // 实现调用用户传入的方法，返回下标给用户
+            this.CallMethods()
+
+            // 清除所有的激活样式
+            Dot.forEach(val => val.className = "swiper-dot");
+            // 为你点击的li加激活样式
+            Dot[index].className = "swiper-dot swiper-active";
+        },
+
+        AutoPlay() {
+            this.defaultConf.timer = setInterval(() => {
+                if (this.defaultConf.config.loop == false
+                    && this.defaultConf.config.auto
+                    && this.defaultConf.reverse) {
+                    this.animation(this.f)
+                } else {
+                    this.animation(-this.f)
+                }
+                this.UserConfig.pagination && this.ChangeDotActive()
+            }, this.defaultConf.config.time * 1000)
+
+            this.$(this.defaultConf.ParentElement).onmouseover = function () {
+                clearInterval(this.defaultConf.timer)
+            }
+
+            this.$(this.defaultConf.ParentElement).onmouseout = () => {
+                this.AutoPlay()
+            }
+        },
+
+        // 通过js调用此方法，实现轮播图的切换
+        slideTo(index) {
+            this.$(this.defaultConf.wrapper).style.left = `-${index * this.f}px`;
+            this.UserConfig.pagination && this.ChangeDotActive()
+        },
+        $: function (className) {
+            return document.querySelector(className)
+        },
+        _: function (className) {
+            return document.querySelectorAll(className)
+        }
+    }
+
+
+    window.swiper = Swiper
+
+
+})()
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/page/banner.js
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/page/banner.js
@@ -0,0 +1,16 @@
+class banner{
+    constructor() {
+        console.log("测试")
+        this.getbannerInfo()
+    }
+    async getbannerInfo(){
+        let res = await indexServe.bannerInfo({
+            url: query("url")//引入AJAX
+            });
+            $(".header img").src=res.banner
+            $(".content h1").innerText=res.title
+            $(".contentJs").innerHTML=res.content
+        console.log(res)
+    }
+}
+new banner()
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/page/index.js
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/page/index.js
@@ -0,0 +1,222 @@
+class Index {
+  constructor() {
+    footer()
+    this.classList = [
+      { title: '推荐', type: 1, page: 1, total_page: 0, content: [] },
+      { title: '时令', type: 2, page: 1, total_page: 0, content: [] },
+      { title: '食肉', type: 3, page: 1, total_page: 0, content: [] },
+      { title: '素食', type: 4, page: 1, total_page: 0, content: [] },
+      { title: '烘焙', type: 5, page: 1, total_page: 0, content: [] },
+    ];
+    this.currentIndex = 0;
+    this.isLoadMore = false; // false 不滚动加载，true 滚动加载
+    this.getThreeMeals();
+    this.getBanner();
+    this.renderTitle();
+
+    // 滚动加载更多数据
+    $("body").onscroll = () => {
+      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+      scrollTop = Math.ceil(scrollTop)
+      let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
+      let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
+
+      if (scrollHeight > clientHeight && scrollTop + clientHeight == scrollHeight) {
+        console.log("滚动到底部了: ", this.isLoadMore)
+        if (this.isLoadMore) {
+          this.classList[this.currentIndex].page += 1;
+          console.log(this.classList[this.currentIndex])
+          this.getIndexType("more")
+        }
+      }
+    }
+  }
+
+  initSwiper() {
+    new swiper('.swiper-container',{
+    })
+  }
+
+  async getBanner() {
+    let res = await indexServe.banner()
+    res.forEach(v => {
+      $(".swiper-wrapper").innerHTML += `
+        <div class="swiper-slide">
+          <div class="banner_item">
+            <a href="./banner.html?url=${v.url}" target="_blank">
+              <img class="back_img" src="${v.img}" alt="">
+            </a>
+          </div>
+        </div>
+      `
+    });
+
+    this.initSwiper()
+  }
+
+  async getThreeMeals() {
+    let res = await indexServe.threeMeals()
+
+    res.forEach((v,i) => {
+      $(".three .title_li").innerHTML += `<li class="${i == 0 ? 'active': ''}">${v.title}</li>`;
+
+      $(".wrapper").innerHTML += `
+       <ul class="swiper-slide title_list">
+         ${
+            v.content.map(item => {
+              return `
+                 <li>
+                    <a href="./info.html?url=${item.url}" target="_blank">
+                      <img class="item_img" src="${item.img}" alt="">
+                      <h2>${item.title}</h2>
+                      <div class="yyw">
+                        <div class="y">养</div>
+                        <div class="desc">${item.des}</div>
+                      </div>
+                    </a>
+                  </li>
+              `
+            }).toString().replaceAll(",","")
+          }
+        </ul>
+      `
+
+    })
+
+
+    var liArr = _(".three .title_li li")
+
+    var sw = new swiper('.ddddddd',{
+      wrapper: '.wrapper',
+      on: {
+        slideChangeTransitionStart(index) {
+          liArr.forEach(v => v.classList.remove("active"))
+          liArr[index].classList.add("active")
+        }
+      }
+    });
+
+    liArr.forEach((v,i) => {
+      v.onclick = function () {
+        liArr.forEach(v => v.classList.remove("active"))
+        this.classList.add("active")
+        sw.slideTo(i)
+      }
+    })
+
+
+
+  }
+
+  // type click 点击加载数据，需要做判断
+  // type more  滚动加载，不需要
+  async getIndexType(type = "click") {
+
+    var getData = async () => {
+      console.log("======== type: ", type)
+      let res = await indexServe.type({
+        page: this.classList[this.currentIndex].page,
+        type: this.classList[this.currentIndex].type
+      });
+      this.classList[this.currentIndex].total_page = res.total_page;
+      this.classList[this.currentIndex].content = [
+        ...this.classList[this.currentIndex].content,
+        ...res.items
+      ]
+
+      if (type == "click") {
+        this.isLoadMore = true
+      }
+
+      var ul = _(".alldo_father ul")
+      ul[this.currentIndex].innerHTML = ""
+      this.classList[this.currentIndex].content.forEach((v, i) => {
+        ul[this.currentIndex].innerHTML += `
+        <li>
+         <a href="./info.html?url=${v.path}" target="_blank">
+          <img class="item_img" src="${
+          Array.isArray(v.img) ? v.img[0] : v.img
+        }" alt="">
+          <h2>${v.title}</h2>
+          
+          <div class="yyw">
+            <div class="y">养</div>
+            ${
+          v.label == null
+            ? ''
+            : v.label.length == 0
+            ? ''
+            : `<div class="desc">${v.label.desc}</div>`
+        }
+            
+          </div>
+          
+          ${
+          v.author.length == undefined
+            ? `<div class="auth">
+                    <div class="left">
+                      <img src="${v.author.avatar_url}" alt="">
+                      <span>${v.author.nickname}</span>
+                    </div>
+                    <div class="right">
+                      <i class="iconfont icon-chakan"></i>
+                      <span>${v.total_amount}</span>
+                    </div>
+                  </div>`
+            : ''
+        }</a>
+        </li>
+      `
+        console.log(v)
+      })
+
+
+
+    }
+
+
+    if (type == "click") {
+
+      if (this.classList[this.currentIndex].content.length == 0) {
+        getData()
+      }
+    } else {
+      getData()
+    }
+  }
+
+
+  async renderTitle() {
+    this.classList.forEach((v,i) => {
+      $(".alldo .title_li").innerHTML += `<li class="${i==0?'active':''}">${v.title}</li>`;
+
+      $(".alldo_father").innerHTML += `
+        <ul class="title_list ${i == 0 ? 'f_active': ''}">
+        </ul>
+      `
+    });
+
+    this.getIndexType()
+
+    var ul = _(".alldo_father ul")
+
+    var li = _(".alldo .title_li li")
+    li.forEach((v,i) => {
+      v.onclick = () => {
+        li.forEach((item,index) => {
+          item.classList.remove("active")
+          ul[index].classList.remove("f_active")
+        })
+        ul[i].classList.add("f_active")
+        v.classList.add("active")
+
+        this.isLoadMore = false
+        console.log("你点击了：",this.isLoadMore)
+        this.currentIndex = i
+        this.getIndexType()
+      }
+    })
+  }
+}
+
+new Index();
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/page/info.js
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/page/info.js
@@ -0,0 +1,111 @@
+class info {
+    constructor() {
+        console.log("详情");
+        this.getInfo()
+    }
+
+    async getInfo() {
+        let res = await indexServe.info({
+            url: query("url")//引入AJAX
+        });
+        console.log(res)
+        $(".header img").src = res.backImg;//背景图
+        $(".info_main h2").innerText = res.title;//更改文字
+        $(".posttime").innerText = res.posttime;//更改作者信息
+
+        res.Statistics.forEach(v => {
+            $(".yyinfos").innerHTML += `
+               <li>
+                    <span>${v.title}</span>
+                    <div class="jdw">
+                        <div class="jd" style="${v.proportion}"></div>
+                    </div>
+                </li>
+            `
+        });/*遍历生成卡路里信息*/
+        res.stepInfo.arr.forEach(v => {
+            $(".cpargsw").innerHTML += `
+                <li>
+                    <div class="i" style="background-position: 0px ${v.position}px;"></div>
+                    <span>${v.title}</span>
+                </li>
+
+                                                         `
+        });/*遍历生成图标信息*/
+        $(".show_more .text").innerText = res.stepInfo.message;//更改介绍信息
+        $(".more").onclick = () => {
+            if ($(".more span").innerText == "展开") {
+                $(".more span").innerText = "收起"
+                $(".show_more").style.height = "auto";
+                $(".more img").style = `transform: rotate(180deg);`
+            } else {
+                $(".more span").innerText = "展开"
+                $(".more img").style = `transform: rotate(0deg);`
+                $(".show_more").style.height = "42px";
+            }
+
+        }/*点击展示收起*/
+        res.material.main.forEach(v => {
+            $(".zhuliao ul").innerHTML += `
+              <li>
+                <div class="list_title">${v.title}</div>
+                <div class="list_nums">${v.nums}</div>
+              </li>
+            `
+        })//遍历主料
+        res.material.accessories.forEach(v => {
+            $(".fuliao ul").innerHTML += `
+              <li>
+                <div class="list_title">${v.title}</div>
+                <div class="list_nums">${v.nums}</div>
+              </li>
+            `
+        })//遍历辅料
+
+        res.DetailedSteps.forEach(v => {
+            $(".info_list").innerHTML += `
+                ${
+                Array.isArray(v.step_img)/*判断是否为数组如果是*/
+                    ? `<li>
+                        <div class="info_top cpimg">
+                            <img src="${v.step_img[0]}" alt="">
+                            <div class="setp">成品图</div>
+                        </div>
+                        <div class="change_list">
+                            ${
+                        v.step_img.map((item, index) => {
+                            return `<img src="${item}" alt="" style="opacity: ${index == 0 ? 1 : 0.4}">`
+                        }).toString().replaceAll(",", "")
+                    }
+                        </div>
+                    </li>`
+                    
+                    : v.step_img == null/*二次判断是否为null如果是*/
+                    
+                    ? `<li class="step">
+                           <div class="step_title">烹饪技巧</div>
+                           <div class="stepdes">${v.step_text}</div>
+                        </li>`
+                    
+                    : /*否则*/`<li>
+                            <div class="info_top">
+                                <img src="${v.step_img}" alt="">
+                                <div class="setp">${v.step_title}</div>
+                            </div>
+                            <p>${v.step_text}</p>
+                        </li>`
+            }`
+        })
+
+        _(".change_list img").forEach(v => {
+            v.onclick = () => {
+                _(".change_list img").forEach(item => item.style.opacity = 0.4)
+                $(".cpimg img").src = v.src
+                v.style.opacity = 1
+            }
+        })
+    }
+
+}
+
+new info()
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/page/like.js
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/page/like.js
@@ -0,0 +1,6 @@
+class Like {
+  constructor() {
+    footer()
+  }
+}
+new Like();
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/page/search.js
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/page/search.js
@@ -0,0 +1,77 @@
+class Search {
+    constructor() {
+        this.page = 1;
+        this.getSearch();
+
+        $("body").onscroll = () => {
+            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+            scrollTop = Math.ceil(scrollTop)
+            let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
+            let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
+            if (scrollHeight > clientHeight && scrollTop + clientHeight == scrollHeight) {
+                console.log("滚动到底部了: ")
+                this.page += 1
+                this.getces()
+            }
+        }
+    }
+
+    getSearch() {
+        console.log("2223")
+        let res
+        $(".ser").onclick = async () => {
+            res = await indexServe.search({
+                page: this.page,
+                q: $(".caipu").value//获取输入框里面的内容返回
+            });
+            console.log(res)
+            if (res.length == 0) {
+                alert("暂无数据")
+            } else {
+                res.forEach((v) => {
+                    $(".list").innerHTML += `
+                 <li>
+                <a href="./info.html?url=${v.href}" target="_blank">
+                    <img src="${v.img}" alt="">
+                    <div class="li_left">
+                        <h3>${v.title}</h3>
+                        <p>${v.des}</p>
+                    </div>
+                </a>
+                   </li>                     
+                                            
+                                            `
+                })
+            }
+        }
+    }
+
+    async getces(){
+      let  res = await indexServe.search({
+            page: this.page,
+            q: $(".caipu").value//获取输入框里面的内容返回
+        });
+        console.log(res)
+        if (res.length == 0) {
+            alert("暂无数据")
+        } else {
+            res.forEach((v) => {
+                $(".list").innerHTML += `
+                 <li>
+                <a href="">
+                    <img src="${v.img}" alt="">
+                    <div class="li_left">
+                        <h3>${v.title}</h3>
+                        <p>${v.des}</p>
+                    </div>
+                </a>
+                   </li>                     
+                                            
+                                            `
+            })
+        }
+    }
+
+}
+
+new Search();
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/page/type.js
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/page/type.js
@@ -0,0 +1,60 @@
+class Type {
+    constructor() {
+        footer();
+        this.gettypeLeft();
+this.gettypeRight()
+
+    }
+
+    reulr = "/fenlei/zhushidaquan/"//用来接受url
+    async gettypeLeft() {
+        let res = await indexServe.typeLeft({})//AJAX
+
+        res.forEach((v, i) => {
+            $(".content_left_list").innerHTML += `
+      <li style=".back">
+        <div class="list_a">
+          <i  style="background-position:0px ${v.position}px"></i>
+          <span class="list_span">${v.title}</span>
+        </div>
+      </li>
+     `
+
+        })//遍历左侧菜单栏
+
+
+        _(".content_left_list li").forEach((v, i) => {
+            v.onclick = () => {
+                console.log(res[i].url)//这个是url数据
+                this.reulr=res[i].url
+                // $(".content_right_list li").style.classText =`background:#fff`
+                $(".content_right_list").innerHTML=""//点击之前还要滞空一次url数据
+
+                this.gettypeRight()//调用方法遍历
+            }
+
+
+        })
+        console.log(res)
+    }
+
+    async gettypeRight() {
+        let res = await indexServe.typeRight({
+            url: this.reulr//返回参数
+        })
+        res.forEach(v=>{
+            $(".content_right_list").innerHTML+=`
+                   <li>
+                <a href="">
+                 <img src="${v.img}" alt="" class="content_right_list_img">
+                    <span class="content_right_list_span">${v.title}</span>
+                    </a>
+                    </li>
+            
+            `
+        })//遍历右侧菜单
+        console.log(res)
+    }
+}
+
+new Type();
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/page/video.js
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/page/video.js
@@ -0,0 +1,72 @@
+class Video {
+    constructor() {
+        footer()
+
+        this.classList = {total_page: 0, page: 1, content: []}
+        this.getvideo()
+
+        $("body").onscroll = () => {
+            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+            scrollTop = Math.ceil(scrollTop)
+            let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
+            let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
+
+            if (scrollHeight > clientHeight && scrollTop + clientHeight == scrollHeight) {
+                console.log("滚动到底部了: ")
+                this.classList.page += 1
+                this.getvideo()
+            }
+        }
+    }
+
+    async getvideo() {
+        let res = await indexServe.video({
+            page: this.classList.page,
+        });
+
+        this.classList.total_page = res.total_page;
+        console.log(this.classList.content)
+        this.classList.content = [
+            ...this.classList.content,
+            ...res.items,
+        ]
+
+        $(".content_title").innerHTML = ""
+        this.classList.content.forEach(v => {
+            $(".content_title").innerHTML += `
+       <li class="food">
+                <div class="content_img">
+                    <img src="${v.bd_photo}" alt=""class="content_img_1">
+                    <i class="content_img_play"></i>
+                </div>
+                <div class="content_font">
+                    <p class="title">${v.seo_title}</p>
+                    <div class="content_font_below">
+                        <div class="content_font_below_left">
+                            <img src="../img/user.jpg" alt="">
+                            <span>美食杰</span>
+                        </div>
+                        <div class="content_font_below_right">
+                            <i class="view"></i>
+                            <span class="content_font_below_right_span">${v.click_num}</span>
+                        </div>
+                    </div>
+                </div>
+        </li>
+                                `
+        });
+
+
+
+        _(".content_title li").forEach((v, i) => {/*获取所有li标签*/
+            v.onclick = function () {
+                localStorage.setItem("videoInfo", JSON.stringify(res.items[i]))//数据进行转化存储到本地并
+                location.href="./video_detailed.html"
+            }
+        })
+    }
+
+
+}
+
+new Video();
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/page/videoInfo.js
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/page/videoInfo.js
@@ -0,0 +1,19 @@
+class VideoInfo {
+  constructor() {
+    this.getVideoInfo()
+  }
+
+  getVideoInfo() {
+    let info = JSON.parse(localStorage.getItem("videoInfo"))
+    console.log(info)
+    $(".title").innerText = info.title
+    $(".video_top").src = info.xhz_video_url
+    $(".video_top").poster = info.bd_photo
+    $(".content_c").innerText = info.intro
+    $(".shijian").innerText = secondToTimeStr(info.total_time);
+
+  }
+
+}
+
+new VideoInfo()
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/serve/CarServe.js
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/serve/CarServe.js
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/serve/IndexServe.js
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/serve/IndexServe.js
@@ -0,0 +1,68 @@
+
+class IndexServe {
+  async index(params) {
+    return await new Ajax().get({
+      url: config.urlList.index,
+      data: params,
+    })
+  }
+
+  async banner(params = {}) {
+    return await new Ajax().get({
+      url: config.urlList.banner,
+      data: params,
+    })
+  }
+
+  async threeMeals(params = {}) {
+    return await new Ajax().get({
+      url: config.urlList.threeMeals,
+      data: params,
+    })
+  }
+
+  async type(params = {}) {
+    return await new Ajax().get({
+      url: config.urlList.type,
+      data: params,
+    })
+  }
+  async video(params = {}) {
+    return await new Ajax().get({
+      url: config.urlList.video,
+      data: params,
+    })
+  }
+  async info(params = {}) {
+    return await new Ajax().get({
+      url: config.urlList.info,
+      data: params,
+    })
+  }
+  async bannerInfo(params = {}) {
+    return await new Ajax().get({
+      url: config.urlList.bannerInfo,
+      data: params,
+    })
+  }
+  async search(params = {}) {
+    return await new Ajax().get({
+      url: config.urlList.search,
+      data: params,
+    })
+  }
+  async typeLeft(params = {}) {
+    return await new Ajax().get({
+      url: config.urlList.typeLeft,
+      data: params,
+    })
+  }
+  async typeRight(params = {}) {
+    return await new Ajax().get({
+      url: config.urlList.typeRight,
+      data: params,
+    })
+  }
+}
+
+var indexServe = new IndexServe();
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/serve/OrderServe.js
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/serve/OrderServe.js
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/utils/utils.js
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/utils/utils.js
@@ -0,0 +1,63 @@
+class Utils {
+    constructor() {
+    }
+
+    $(className) {
+        return document.querySelector(className);
+    }
+
+    _(className) {
+        return document.querySelectorAll(className);
+    }
+
+    query(name) {
+        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
+        var r = window.location.search.substr(1).match(reg);
+        if (r != null) return unescape(r[2]);
+        return null;
+    }
+
+    footer() {
+        var footerList = [
+            {title: '首页', img: 'home', isActve: true, url: './index.html'},
+            {title: '视频', img: 'video', isActve: false, url: './video.html'},
+            {title: '分类', img: 'type', isActve: false, url: './type.html'},
+            {title: '我的', img: 'like', isActve: true, url: './like.html'},
+        ];
+
+        // 当前访问的页面地址
+        var currentUrl = location.href.match(/page\/([\s\S]*?).html/)[1]
+
+        $("body").innerHTML += `
+      <ul class="footer">
+        ${
+            footerList.map((v, i) => {
+                return `<li class="${v.url.includes(currentUrl) ? 'footer_active' : ''}">
+              <a href="${v.url}">
+                <img src="${
+                    v.url.includes(currentUrl)
+                        ? v.isActve
+                        ? `../img/${v.img}_active.png`
+                        : `../img/${v.img}.png`
+                        : `../img/${v.img}.png`
+                }" alt="">
+                
+                <p>${v.title}</p>
+              </a>
+            </li>`
+            }).toString().replaceAll(",", "")
+        }
+      </ul>
+    `
+    }
+    secondToTimeStr(t) {
+        if (!t) return;
+        if (t < 60) return "00:" + ((i = t) < 10 ? "0" + i : i);
+        if (t < 3600) return "" + ((a = parseInt(t / 60)) < 10 ? "0" + a : a) + ":" + ((i = t % 60) < 10 ? "0" + i : i);
+        if (3600 <= t) {
+            var a, i, e = parseInt(t / 3600);
+            return (e < 10 ? "0" + e : e) + ":" + ((a = parseInt(t % 3600 / 60)) < 10 ? "0" + a : a) + ":" + ((i = t % 60) < 10 ? "0" + i : i);
+        }
+    }}
+
+var {$, _, footer,query,secondToTimeStr} = new Utils();
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/page/banner.html
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/page/banner.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2576965_pg56sl6byua.css">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../css/loading.css">
+    <link rel="stylesheet" href="../css/swiper.css">
+    <link rel="stylesheet" href="../css/banner.css">
+    <title>Title</title>
+</head>
+<body>
+<div class="header clear_size">
+    <img src="" alt="">
+</div>
+<div class="content clear_size">
+    <h1>无烧烤不夏天，在家自制小烧烤，爽翻天~</h1>
+    <div class="contentJs"></div>
+</div>
+</body>
+<script src="../js/lib/rem.js"></script>
+<script src="../js/lib/loading.js"></script>
+<script src="../js/lib/swiper.js"></script>
+<script src="../js/utils/utils.js"></script>
+<script src="../js/config/config.js"></script>
+<script src="../js/ajax/ajax.js"></script>
+<script src="../js/serve/IndexServe.js"></script>
+<script src="../js/page/banner.js"></script>
+</html>
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/page/index.html
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/page/index.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>美食App</title>
+  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2576965_pg56sl6byua.css">
+  <link rel="stylesheet" href="../css/clear.css">
+  <link rel="stylesheet" href="../css/public.css">
+  <link rel="stylesheet" href="../css/loading.css">
+  <link rel="stylesheet" href="../css/swiper.css">
+  <link rel="stylesheet" href="../css/index.css">
+</head>
+<body>
+
+<div class="header">
+  <a class="search">
+    <i class="iconfont icon-sousuo"></i>
+    <span>搜索百万免费菜谱</span>
+  </a>
+</div>
+<div class="content">
+  <div class="hot">
+    <div class="title padding_16">今日热门</div>
+    <div class="swiper-container padding_16">
+      <div class="swiper-wrapper">
+      </div>
+    </div>
+  </div>
+
+  <div class="sanc clear_size three">
+    <div class="title padding_16">每日三餐</div>
+    <ul class="title_li padding_16">
+    </ul>
+
+    <div class="swiper-container ddddddd padding_16">
+      <div class="swiper-wrapper wrapper">
+
+      </div>
+    </div>
+  </div>
+
+
+  <div class="sanc clear_size padding_16 alldo">
+    <div class="title ">大家都在做</div>
+    <ul class="title_li ">
+
+    </ul>
+
+    <div class="alldo_father">
+
+    </div>
+
+  </div>
+
+</div>
+
+
+</body>
+<script src="../js/lib/rem.js"></script>
+<script src="../js/lib/loading.js"></script>
+<script src="../js/lib/swiper.js"></script>
+<script src="../js/utils/utils.js"></script>
+<script src="../js/config/config.js"></script>
+<script src="../js/ajax/ajax.js"></script>
+<script src="../js/serve/IndexServe.js"></script>
+<script src="../js/page/index.js"></script>
+<script>
+  var a = []
+  console.log(...a)
+</script>
+</html>
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/page/info.html
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/page/info.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>详情</title>
+    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2576965_pg56sl6byua.css">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../css/loading.css">
+    <link rel="stylesheet" href="../css/swiper.css">
+    <link rel="stylesheet" href="../css/info.css">
+</head>
+<body>
+    
+
+    <div class="header clear_size">
+        <div class="background">
+            <i class="iconfont icon-zuo"></i>
+        </div>
+        <img src="https://st-cn.meishij.net/r/44/110/4152544/s4152544_152871039743054.jpg" alt="">
+    </div>
+
+    <div class="content clear_size">
+        <div class="info_main">
+            <h2>胡椒烤大虾</h2>
+            <div class="posttime">by 火镀红叶　2 收藏　41953 浏览</div>
+            <ul class="yyinfos">
+            </ul>
+            <div class="tips">
+                *tips: 中国居民每日推荐摄入营养所得占比数据
+            </div>
+            <ul class="cpargsw">
+            </ul>
+
+            <div class="show_more">
+                <p class="text">
+                </p>
+                <div class="more">
+                    <span>展开</span>
+                    <img src="https://st-cn.meishij.net/p2/20180831/20180831155952_168.png" alt="">
+                </div>
+            </div>
+
+            <div class="liao zhuliao">
+                <div class="title">
+                    主料 
+
+                </div>
+                <ul class="list">
+                </ul>
+            </div>
+           
+            <div class="liao fuliao">
+                <div class="title">
+                    辅料 
+
+                </div>
+                <ul class="list">
+
+                </ul>
+            </div>
+        </div>
+        <ul class="info_list">
+
+
+
+        </ul>
+    </div>
+
+
+</body>
+<script src="../js/lib/rem.js"></script>
+<script src="../js/lib/loading.js"></script>
+<script src="../js/lib/swiper.js"></script>
+<script src="../js/utils/utils.js"></script>
+<script src="../js/config/config.js"></script>
+<script src="../js/ajax/ajax.js"></script>
+<script src="../js/serve/IndexServe.js"></script>
+<script src="../js/page/info.js"></script>
+</html>
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/page/like.html
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/page/like.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>美食App</title>
+  <link rel="stylesheet" href="../css/clear.css">
+  <link rel="stylesheet" href="../css/public.css">
+  <link rel="stylesheet" href="../css/loading.css">
+  <link rel="stylesheet" href="../css/like.css">
+
+</head>
+<body>
+
+<div class="header"></div>
+<div class="content">
+  like
+</div>
+
+
+</body>
+<script src="../js/lib/rem.js"></script>
+<script src="../js/lib/loading.js"></script>
+<script src="../js/utils/utils.js"></script>
+<script src="../js/config/config.js"></script>
+<script src="../js/ajax/ajax.js"></script>
+<script src="../js/serve/IndexServe.js"></script>
+<script src="../js/page/like.js"></script>
+
+</html>
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/page/scerh.html
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/page/scerh.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Title</title>
+    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2576965_pg56sl6byua.css">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../css/loading.css">
+    <link rel="stylesheet" href="../css/swiper.css">
+    <link rel="stylesheet" href="../css/scerth.css">
+</head>
+<body>
+<div class="hader clear_size">
+    <a href="">
+        <i></i>
+    </a>
+    <input type="text" placeholder="菜谱名,食材名" class="caipu">
+    <input type="button" class="ser" value="搜索">
+</div>
+<div class="contter clear_size">
+    <div class="contter_top">
+        <ul class="list">
+
+
+
+        </ul>
+    </div>
+    <p>请输入要搜索的关键字</p>
+</div>
+</body>
+<script src="../js/lib/rem.js"></script>
+<script src="../js/lib/loading.js"></script>
+<script src="../js/lib/swiper.js"></script>
+<script src="../js/utils/utils.js"></script>
+<script src="../js/config/config.js"></script>
+<script src="../js/ajax/ajax.js"></script>
+<script src="../js/serve/IndexServe.js"></script>
+<script src="../js/page/search.js"></script>
+
+</html>
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/page/type.html
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/page/type.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>美食App</title>
+  <meta charset="UTF-8">
+  <title>Title</title>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2576965_pg56sl6byua.css">
+  <link rel="stylesheet" href="../css/clear.css">
+  <link rel="stylesheet" href="../css/public.css">
+  <link rel="stylesheet" href="../css/loading.css">
+  <link rel="stylesheet" href="../css/swiper.css">
+  <link rel="stylesheet" href="../css/sort.css">
+
+</head>
+<body>
+
+<div class="header">
+  <div class="header_search">
+    <i class="scerch"></i>
+    <input type="text" placeholder="搜索百万免费菜谱">
+  </div>
+</div>
+<div class="content">
+  <div class="content_left">
+    <ul class="content_left_list">
+
+    </ul>
+  </div>
+  <div class="content_right">
+    <ul class="content_right_list">
+
+
+    </ul>
+  </div>
+</div>
+</div>
+
+
+</body>
+<script src="../js/lib/rem.js"></script>
+<script src="../js/lib/loading.js"></script>
+<script src="../js/lib/swiper.js"></script>
+<script src="../js/utils/utils.js"></script>
+<script src="../js/config/config.js"></script>
+<script src="../js/ajax/ajax.js"></script>
+<script src="../js/serve/IndexServe.js"></script>
+<script src="../js/page/type.js"></script>
+
+</html>
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/page/video.html
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/page/video.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>美食App</title>
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../css/loading.css">
+    <link rel="stylesheet" href="../css/video.css">
+
+</head>
+<body>
+
+<div class="header">
+    <div class="header_left">
+            <img src="../img/left.png" alt="" class="header_left_img">
+            <span>返回</span>
+    </div>
+    <h1>菜谱视频大全</h1>
+    <a href=""><img src="../img/search.png" alt="" class="header_left_search"></a>
+</div>
+<div class="content">
+    <ul class="content_title">
+
+    </ul>
+</div>
+</div>
+
+
+</body>
+<script src="../js/lib/rem.js"></script>
+<script src="../js/lib/loading.js"></script>
+<script src="../js/utils/utils.js"></script>
+<script src="../js/config/config.js"></script>
+<script src="../js/ajax/ajax.js"></script>
+<script src="../js/serve/IndexServe.js"></script>
+<script src="../js/page/video.js"></script>
+
+</html>
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/page/video_detailed.html
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/page/video_detailed.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Title</title>
+    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2576965_pg56sl6byua.css">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../css/loading.css">
+    <link rel="stylesheet" href="../css/swiper.css">
+    <link rel="stylesheet" href="../css/video.css">
+    <link rel="stylesheet" href="../css/video_detailed.css">
+</head>
+<body>
+<div class="content">
+    <video controls poster="" class="video_top"
+           src="">
+    </video>
+    <div class="content_font">
+        <div class="content_font_top">
+            <a href="">
+                <h3 class="title">左宗棠鸡的做法</h3>
+            </a>
+            <div class="content_font_span">
+                <span>时长:</span>
+                <span class="shijian">01:23</span>
+            </div>
+            <div class="user">
+                <img src="../img/user.jpg" alt="">
+                <div class="user_right">
+                    <p>美食杰 <span>专业原创菜谱视频</span></p>
+                    <p class="user_p">做菜只用美食杰，让做饭更具幸福感！</p>
+                </div>
+            </div>
+            <h3>视频内容</h3>
+            <div class="content_c">
+            </div>
+
+        </div>
+
+    </div>
+</div>
+</body>
+<script src="../js/lib/rem.js"></script>
+<script src="../js/lib/loading.js"></script>
+<script src="../js/lib/swiper.js"></script>
+<script src="../js/utils/utils.js"></script>
+<script src="../js/config/config.js"></script>
+<script src="../js/ajax/ajax.js"></script>
+<script src="../js/serve/IndexServe.js"></script>
+<script src="../js/page/videoInfo.js"></script>
+</html>