1.豆瓣

  1. <div id="app">
  3. </div>
  4. <script>
  5.   ajax({
  6.   url:"http://192.168.4.18:8000",
  7.   method:"get",
  8.   success:res=>{
  9.     /* console.log(res); */
  10.     var arr = res.result;
  11.     //    console.log(arr)
  12.     arr.forEach((item,index)=>{
  13.       var html = `
  14.           <div class="container">
  15.           <span>${index+1}</span>
  16.           <img src=${item.pic}>
  17.           <div class="content">
  18.           <p class="title">${item.title}</p>
  19.           <p class="name">导演：弗兰克·德拉邦特 Frank Darabont   主演: 蒂姆·罗宾斯 Tim Robbins /...</p>
  20.           <p class="labels">${item.labels.join("/")}</p>
  21.           <p class="grade">
  22.           <span class="score">${item.raiting}</span>
  23.           <span class="comment">${item.evaluate}人评价</span>
  24.           </p>
  25.           <p class="logo">“  ${item.slogo}  ”</p>
  26.           </div>
  27.           </div>
  28.         `
  29.       $("#app").append(html)
  30.     })
  32.   }
  33. })
  35. ajax({
  36.   url:"http://192.168.4.18:8000/ad",
  37.   method:"get",
  38.   success:res=>{
  39.     var arr=res.result
  40.     //console.log(arr)
  41.     var html = `
  42.           <div id="right">
  43.           <p class="right-title">${arr.title}</p>
  44.           <img src=${arr.poster}>
  45.           <div class="right-bottom">
  46.           <img class="erweima" src=${arr.erweima}>
  47.           <img class="logo" src=${arr.logo}>
  48.           <div>
  49.           <p class="title">${arr.labels[0]}</p>
  50.           <p class="title-content">${arr.labels[1]}</p>
  51.           </div>
  52.           </div>
  53.           </div>
  54.      `
  55.     $("#app").append(html)
  56.   }
  57. })
  58. </script>
  1. *{
  2.   margin: 0;
  3.   padding: 0;
  4. }
  5. #app{
  6.   position: relative;
  7. }
  8. .container{
  9.   border-top: 1px dotted #666;
  10.   height: 160px;
  11.   width: 600px;
  12.   margin-left: 200px;
  13.   margin-top: 20px;
  14.   padding-top: 20px;
  15.   display: flex;
  16.   font-size: 13px;
  17. }
  18. .container img{
  19.   width: 100px;
  20.   height: 150px;
  21.   margin-right: 20px;
  22. }
  23. .container>span{
  24.   margin-right: 10px;
  25. }
  26. .title{
  27.   color: #336699;
  28.   margin-bottom: 17px;
  29. }
  30. .name,.labels{
  31.   color: #666;
  32. }
  33. .labels{
  34.   margin-bottom: 17px;
  35. }
  36. .score{
  37.   color: #E09015;
  38.   margin-right: 20px;
  39. }
  40. .comment{
  41.   color: #666;
  42. }
  43. .content .logo{
  44.   margin-top: 20px;
  45.   color: #666;
  46. }
  47. #right{
  48.   position: absolute;
  49.   width: 300px;
  50.   height: 450px;
  51.   margin-right: 180px;
  52.   top: 0;
  53.   right: 0;
  54. }
  55. .right-title{
  56.   font-size: 14px;
  57.   color: #666;
  58.   margin-bottom: 10px;
  59. }
  60. .erweima{
  61.   width: 80px;
  62.   height: 80px;
  63.   margin-top: 15px;
  64. }
  65. .right-bottom .logo{
  66.   margin-top: 4px;
  67.   width: 84px;
  68.   height: 95px;
  69. }
  70. .right-bottom>div{
  71.   float: right;
  72.   margin-top: 27px;
  73.   margin-right: 26px;
  74. }
  75. .right-bottom .title{
  76.   font-size: 18px;
  77.   color: black;
  78.   margin-bottom: 5px;
  79. }
  80. .title-content{
  81.   font-size: 15px;
  82.   color: #666;
  83. }