YardBenchmark.vue 870 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <template>
  2. <el-container>
  3. <el-header>Header</el-header>
  4. <el-main>Main</el-main>
  5. <el-footer>Footer</el-footer>
  6. </el-container>
  7. </template>
  8. <script>
  9. export default {
  10. data(){
  11. },
  12. methods(){
  13. },
  14. mounted(){
  15. },
  16. }
  17. </script>
  18. <style scoped>
  19. .el-header, .el-footer {
  20. background-color: #B3C0D1;
  21. color: #333;
  22. text-align: center;
  23. line-height: 60px;
  24. }
  25. .el-aside {
  26. background-color: #D3DCE6;
  27. color: #333;
  28. text-align: center;
  29. line-height: 200px;
  30. }
  31. .el-main {
  32. background-color: #E9EEF3;
  33. color: #333;
  34. text-align: center;
  35. line-height: 160px;
  36. }
  37. body > .el-container {
  38. margin-bottom: 40px;
  39. }
  40. .el-container:nth-child(5) .el-aside,
  41. .el-container:nth-child(6) .el-aside {
  42. line-height: 260px;
  43. }
  44. .el-container:nth-child(7) .el-aside {
  45. line-height: 320px;
  46. }
  47. </style>