borderTemplate.vue 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <template>
  2. <div class="border-box-style box-content-style" :style="borderBox">
  3. <div class="justify-style">
  4. <div class="justify-style">
  5. <div class="icon"></div>
  6. <div class="title">业务员账户</div>
  7. </div>
  8. </div>
  9. </div>
  10. </template>
  11. <script>
  12. export default {
  13. name: "borderTemplate",
  14. props:["borderBox"]
  15. }
  16. </script>
  17. <style scoped>
  18. .border-box-style{
  19. background: linear-gradient( 180deg, #00244D 0%, #001E41 100%);
  20. box-shadow: 0.000vw 0.104vw 0.208vw 0.052vw rgba(0,0,0,0.15);
  21. border-radius: 0.208vw 0.208vw 0.208vw 0.208vw;
  22. border: 0.104vw solid #3D73BA;
  23. opacity: 0.8;
  24. }
  25. .justify-style{
  26. display: flex;
  27. justify-content: left;
  28. }
  29. .box-content-style{
  30. padding: 1.042vw;
  31. }
  32. .box-content-style .icon {
  33. width: 0.313vw;
  34. height: 0.938vw;
  35. background: #E6F4FF;
  36. border-radius: 0.104vw 0.104vw 0.104vw 0.104vw;
  37. }
  38. .box-content-style .title{
  39. font-family: Microsoft YaHei, Microsoft YaHei;
  40. font-weight: bold;
  41. font-size: 1.250vw;
  42. color: #E6F4FF;
  43. text-align: left;
  44. }
  45. </style>