Partner.vue 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <template>
  2. <div class="partner">
  3. <div class="partner-container container">
  4. <h3>合作案例</h3>
  5. <ul class="list-unstyled">
  6. <li v-for="p in partners">
  7. <a :href="p.href" target="_blank">
  8. <img :src="p.img"/>
  9. </a>
  10. </li>
  11. </ul>
  12. </div>
  13. </div>
  14. </template>
  15. <script>
  16. export default {
  17. name: 'partner',
  18. data () {
  19. return {
  20. partners: [{
  21. href: 'http://www.worldshine.net/',
  22. img: '/images/partners/8.jpg'
  23. }, {
  24. href: 'http://www.tidal.cn/docc/default.html',
  25. img: '/images/partners/2.jpg'
  26. }, {
  27. href: 'http://www.huansujt.com',
  28. img: '/images/partners/3.jpg'
  29. }, {
  30. href: 'http://www.madigi.net',
  31. img: '/images/partners/4.jpg'
  32. }, {
  33. href: 'http://www.51cube.com',
  34. img: '/images/partners/5.jpg'
  35. }, {
  36. href: 'http://www.szsoling.com/home',
  37. img: '/images/partners/6.jpg'
  38. }, {
  39. href: 'http://www.chiptrip.com.cn/china/cn/index.asp',
  40. img: '/images/partners/7.jpg'
  41. }]
  42. }
  43. }
  44. }
  45. </script>
  46. <style lang="scss" scoped>
  47. @import '~assets/scss/variables';
  48. .partner-container h3{
  49. font-size: 24px;
  50. }
  51. .partner {
  52. text-align: center;
  53. margin-bottom: $xlg-pad;
  54. ul {
  55. width: 1204px;
  56. overflow: hidden;
  57. li {
  58. float: left;
  59. width: 155px;
  60. height: 61px;
  61. margin-right: 15px;
  62. border: $border;
  63. img {
  64. max-width: 155px;
  65. max-height: 59px;
  66. }
  67. }
  68. }
  69. }
  70. </style>