sketch-template-svg.vue 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <template>
  2. <svg
  3. id="图层_1"
  4. version="1.1"
  5. xmlns="http://www.w3.org/2000/svg"
  6. xmlns:xlink="http://www.w3.org/1999/xlink"
  7. x="0px"
  8. y="0px"
  9. viewBox="0 0 120 120"
  10. style="enable-background: new 0 0 120 120"
  11. xml:space="preserve"
  12. >
  13. <path
  14. class="st0"
  15. d="M13,15h48c3.3,0,6,2.7,6,6v33c0,3.3-2.7,6-6,6H13c-3.3,0-6-2.7-6-6V21C7,17.7,9.7,15,13,15z"
  16. />
  17. <path
  18. class="st0"
  19. d="M81,15h20c3.3,0,6,2.7,6,6v33c0,3.3-2.7,6-6,6H81c-3.3,0-6-2.7-6-6V21C75,17.7,77.7,15,81,15z"
  20. />
  21. <path
  22. class="st1"
  23. d="M12.5,15h49c3,0,5.5,2.5,5.5,5.5l0,0c0,3-2.5,5.5-5.5,5.5h-49c-3,0-5.5-2.5-5.5-5.5l0,0C7,17.5,9.5,15,12.5,15z
  24. "
  25. />
  26. <path
  27. class="st2"
  28. d="M80.5,15h21c3,0,5.5,2.5,5.5,5.5l0,0c0,3-2.5,5.5-5.5,5.5h-21c-3,0-5.5-2.5-5.5-5.5l0,0
  29. C75,17.5,77.5,15,80.5,15z"
  30. />
  31. <path
  32. class="st0"
  33. d="M90,68c3.3,0,6,2.7,6,6v28c0,2.2-1.8,4-4,4H13c-3.3,0-6-2.7-6-6V74c0-3.3,2.7-6,6-6H90z"
  34. />
  35. <path
  36. class="st2"
  37. d="M18,73.5v27c0,3-2.5,5.5-5.5,5.5l0,0c-3,0-5.5-2.5-5.5-5.5v-27c0-3,2.5-5.5,5.5-5.5l0,0
  38. C15.5,68,18,70.5,18,73.5z"
  39. />
  40. <path class="st3" d="M84.3,78.7L79.5,68h13.1L84.3,78.7z" />
  41. <path class="st4" d="M102.1,78.7H84.2L92.6,68L102.1,78.7z" />
  42. <path class="st5" d="M70,78.7L79.5,68l4.8,10.7H70z" />
  43. <path class="st6" d="M92.6,68l9.5,10.7l4.8-10.7H92.6z" />
  44. <path class="st5" d="M106.8,68l8.3,10.7h-13.1L106.8,68z" />
  45. <path class="st7" d="M93.8,106l21.4-27.3h-13.1L93.8,106z" />
  46. <path class="st3" d="M70,78.7L93.8,106l-9.5-27.3H70z" />
  47. <path class="st5" d="M93.8,106l8.3-27.3H84.2L93.8,106z" />
  48. </svg>
  49. </template>
  50. <style scoped lang="scss">
  51. .st0 {
  52. fill: #f2f8fe;
  53. }
  54. .st1 {
  55. fill: #ffd6d2;
  56. }
  57. .st2 {
  58. fill: #20a0ff;
  59. }
  60. .st3 {
  61. fill: #6496dc;
  62. }
  63. .st4 {
  64. fill: #afc8ea;
  65. }
  66. .st5 {
  67. fill: #80a8e1;
  68. }
  69. .st6 {
  70. fill: #93b8ee;
  71. }
  72. .st7 {
  73. fill: #afc8eb;
  74. }
  75. .dark {
  76. .st0 {
  77. fill: #3e444a;
  78. }
  79. }
  80. </style>