• 【vue循环】如何显示商家与商家里的商品数据？

    最近有小伙伴做项目没有思路，
    它只会通过v-for循环显示商家数据，
    而商品数据却没有思路，
    其实原理很简单，

    模拟商家数据如下：

    1. list: [{
    2.                 id: '1',
    3.                 name: '店铺一',
    4.                 list: [{
    5.                     name: '商品1',
    6.                     id: '11'
    7.                 }, {
    8.                     name: '商品2',
    9.                     id: '12'
    10.                 }]
    11.             }, {
    12.                 id: '2',
    13.                 name: '店铺二',
    14.                 list: [{
    15.                     name: '商品2店铺二',
    16.                     id: '21'
    17.                 }, {
    18.                     name: '商品2店铺二',
    19.                     id: '22'
    20.                 }]
    21.             }]


    首先我们先用v-for="item in list"一键绑定如下图：


    循环遍历商家数据，
    而这个item则是每个商家的数据，
    其中item.list则表示为商品数据，
    所以我们只需要继续通过v-for指令，
    遍历循环商品数据即可，
    如v-for="item2 in item.list"，如下图


    将item改为item2用来区分商家与商品，
    这样item2就表示为商品数据了，
    最后在将商品数据进行双向绑定，
    注意：这里的商品名称都用item2来进行表示，
    即可正常的显示商品数据了。
    最后我们来对照一下,
    可以看出渲染之后的效果，
    与数据里的数据正好一一对应。

    用guiplan可视化操作最后我们来看看生成之后的源代码

    1. <template>
    2.  <div class=" uc986a">
    3.             <div v-for="(item,index) in list" class=" u57daf">
    4.                 <div class=" ud74c1">
    5.                     <i><svg t="1649661246606" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2941" width="20" height="20">
    6.                             <path d="M512 106.667A405.333 405.333 0 1 1 106.667 512 405.333 405.333 0 0 1 512 106.667m0-64A469.333 469.333 0 1 0 981.333 512 469.333 469.333 0 0 0 512 42.667z" p-id="2942" fill="#cdcdcd">path>
    7.                             <path d="M512 106.667A405.333 405.333 0 1 1 106.667 512 405.333 405.333 0 0 1 512 106.667m0-64A469.333 469.333 0 1 0 981.333 512 469.333 469.333 0 0 0 512 42.667z" p-id="2943" fill="#cdcdcd">path>
    8.                         svg>
    9.                     i>
    10.                     <i class="  u51a08active"><svg t="1649677167350" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9222" width="20" height="20">
    11.                             <path d="M512 1011.84A500.48 500.48 0 1 1 1012.48 512 501.12 501.12 0 0 1 512 1011.84zM512 73.6A438.4 438.4 0 1 0 950.4 512 439.04 439.04 0 0 0 512 73.6z" fill="#d81e06" p-id="9223">path>
    12.                             <path d="M512 511.36m-236.8 0a236.8 236.8 0 1 0 473.6 0 236.8 236.8 0 1 0-473.6 0Z" fill="#d81e06" p-id="9224">path>
    13.                         svg>
    14.                     i>
    15.                     <div class=" uc2e84">
    16.                         <i class="  u51a082"><svg t="1649663790334" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4254" width="18" height="15">
    17.                                 <path d="M844.938811 567.613622c-17.251919 0-31.231305 13.978363-31.231305 31.231305L813.707506 825.381383c0 39.028898-26.849508 71.997778-58.629305 71.997778L269.838681 897.379161c-31.779797 0-58.629305-32.969902-58.629305-71.997778L211.209376 598.844927c0-17.251919-13.983479-31.231305-31.231305-31.231305s-31.231305 13.978363-31.231305 31.231305L148.746766 825.381383c0 74.143651 54.324256 134.460388 121.090892 134.460388l485.23952 0c66.772776 0 121.090892-60.316737 121.090892-134.460388L876.16807 598.844927C876.170117 581.591985 862.190731 567.613622 844.938811 567.613622z" p-id="4255" fill="#2c2c2c">path>
    18.                                 <path d="M772.71693 273.572726 252.199952 273.572726c-17.246803 0-31.231305 13.978363-31.231305 31.231305s13.983479 31.231305 31.231305 31.231305l520.516977 0c17.251919 0 31.231305-13.978363 31.231305-31.231305S789.968849 273.572726 772.71693 273.572726z" p-id="4256" fill="#2c2c2c">path>
    19.                                 <path d="M950.22474 283.585777c-0.010233-0.030699-0.020466-0.061398-0.040932-0.101307l-1.454118-3.965312c-1.13894-3.110851-2.734274-5.937223-4.656043-8.417717l-67.443042-130.698714c-23.880897-48.859801-65.064878-75.820849-116.079762-75.93239L266.48633 64.470337c-54.862515 0-87.75567 21.593807-113.517403 74.53967l0.188288 0.091074c-3.035126 4.971222-6.577812 11.42726-11.192923 19.824511-7.045463 12.840446-16.458857 30.001291-25.934672 47.344285-38.962384 71.296813-39.928385 73.92978-41.057091 76.999698-10.166547 27.702945-10.166547 43.75555-10.166547 62.380746 0.071631 72.160483 39.383986 138.109498 102.700033 172.502819 0.467651 0.274246 0.945535 0.548492 1.433652 0.813528 26.75741 14.263865 57.836243 21.50171 92.473111 21.50171 46.617737-0.14224 91.034343-16.642029 125.981273-46.083571 34.753525 29.116131 78.94705 45.50438 125.630279 45.788859 46.048779-0.366344 89.946568-16.794501 124.542504-45.911656 35.012422 29.421077 79.57229 45.819558 126.479623 45.819558 35.246759-0.183172 66.813708-7.777127 93.78499-22.558785 63.11241-34.494629 102.304014-100.616582 102.263082-172.400488C960.177416 326.833767 960.258257 311.034942 950.22474 283.585777zM897.633964 345.001545c0.020466 49.072649-26.707268 94.181009-69.791529 117.726262-17.791202 9.759271-39.364543 14.771425-63.956637 14.893198-39.750329 0-77.081563-17.303085-102.425787-47.477314-5.92699-7.065929-14.680351-11.142781-23.911596-11.142781l-0.010233 0c-9.231245 0-17.984606 4.087085-23.921829 11.162224-25.085328 29.909194-61.933561 47.242977-100.647281 47.547923-39.460734-0.243547-76.547397-17.537422-101.740172-47.446615-5.932106-7.045463-14.675234-11.112082-23.886013-11.112082-0.010233 0-0.020466 0-0.025583 0-9.221012 0.010233-17.969257 4.087085-23.896246 11.151991-25.340131 30.193673-62.594617 47.578622-102.105492 47.700395-23.672142 0-44.48312-4.564969-61.877279-13.57211-0.396019-0.233314-0.793062-0.457418-1.199315-0.681522-43.73099-23.311939-70.920236-68.592214-70.971401-118.132514 0-15.809057 0-23.209608 5.92699-39.688931 7.03523-14.161534 71.052243-130.708947 75.027787-137.865951 0.320295-0.558725 0.620124-1.13894 0.904603-1.728364 16.408715-33.711799 28.714995-39.404452 57.358359-39.404452l493.992881 0c27.053146 0.061398 46.724161 13.510712 60.143799 41.132816 0.11154 0.224104 0.224104 0.447185 0.335644 0.671289l71.225181 138.028657C897.735271 322.45197 897.704572 329.670371 897.633964 345.001545z" p-id="4257" fill="#2c2c2c">path>
    20.                                 <path d="M390.58165 586.848709c-17.246803 0-31.231305 13.978363-31.231305 31.231305l0 30.468942c0 17.251919 13.983479 31.231305 31.231305 31.231305 17.246803 0 31.231305-13.978363 31.231305-31.231305l0-30.468942C421.812955 600.827071 407.829476 586.848709 390.58165 586.848709z" p-id="4258" fill="#2c2c2c">path>
    21.                                 <path d="M634.335233 586.848709c-17.251919 0-31.231305 13.978363-31.231305 31.231305l0 30.468942c0 17.251919 13.978363 31.231305 31.231305 31.231305 17.251919 0 31.231305-13.978363 31.231305-31.231305l0-30.468942C665.566538 600.827071 651.587152 586.848709 634.335233 586.848709z" p-id="4259" fill="#2c2c2c">path>
    22.                                 <path d="M589.479629 728.293161c-14.267958-9.404184-33.56956-5.418406-43.155892 8.753361-0.132006 0.193405-13.613042 19.75288-34.174334 19.75288-19.992333 0-32.425504-18.10638-33.264615-19.367093-9.174963-14.426571-28.288277-18.807345-42.830481-9.759271-14.654768 9.099239-19.153222 28.353768-10.04989 43.00342 11.208273 18.044982 41.971927 48.584532 86.144986 48.584532 43.959188 0 75.098395-30.306236 86.571704-48.219211C607.941096 756.646929 603.752704 737.686089 589.479629 728.293161z" p-id="4260" fill="#2c2c2c">path>
    23.                             svg>
    24.                         i>
    25.                         <span class="  u1404d">{{item.name}}
    26.                         span>
    27.                         <i><svg t="1649664442692" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6180" width="10" height="10">
    28.                                 <path d="M303.593 56.146c8.889 0 17.777 3.406 24.524 10.22l416.225 417.16c13.63 13.738 13.597 35.906-0.07 49.605L328.048 950.304c-14.694 14.75-39.442 13.425-52.334-3.994-10.419-14.076-7.23-34.124 5.14-46.521L671.09 508.664a0.622 0.622 0 0 0 0.001-0.878l-389.75-390.489c-14.796-14.915-15.705-40.458 0.69-53.595a34.441 34.441 0 0 1 21.562-7.556z" fill="" p-id="6181">path>
    29.                             svg>
    30.                         i>
    31.                     div>
    32.                     <div class=" youhuiquan">
    33.                         <span class="  youhuiquanspan">优惠券
    34.                         span>
    35.                     div>
    36.                 div>
    37.                 <div class=" u6c5f0">
    38.                     <span class="  ua44d0">满减
    39.                     span>
    40.                     <span class="  ue211f">满68元减2元
    41.                     span>
    42.                     <div>
    43.                         <span class=" ue211f  ">去凑单
    44.                         span>
    45.                         <i><svg t="1649664442692" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6180" width="10" height="10">
    46.                                 <path d="M303.593 56.146c8.889 0 17.777 3.406 24.524 10.22l416.225 417.16c13.63 13.738 13.597 35.906-0.07 49.605L328.048 950.304c-14.694 14.75-39.442 13.425-52.334-3.994-10.419-14.076-7.23-34.124 5.14-46.521L671.09 508.664a0.622 0.622 0 0 0 0.001-0.878l-389.75-390.489c-14.796-14.915-15.705-40.458 0.69-53.595a34.441 34.441 0 0 1 21.562-7.556z" fill="" p-id="6181">path>
    47.                             svg>
    48.                         i>
    49.                     div>
    50.                 div>
    51.                 <div v-for="(item2,index2) in item.list" class=" u7497b">
    52.                     <div class=" u11609">
    53.                         <i><svg t="1649661246606" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2941" width="20" height="20">
    54.                                 <path d="M512 106.667A405.333 405.333 0 1 1 106.667 512 405.333 405.333 0 0 1 512 106.667m0-64A469.333 469.333 0 1 0 981.333 512 469.333 469.333 0 0 0 512 42.667z" p-id="2942" fill="#cdcdcd">path>
    55.                                 <path d="M512 106.667A405.333 405.333 0 1 1 106.667 512 405.333 405.333 0 0 1 512 106.667m0-64A469.333 469.333 0 1 0 981.333 512 469.333 469.333 0 0 0 512 42.667z" p-id="2943" fill="#cdcdcd">path>
    56.                             svg>
    57.                         i>
    58.                         <div class=" u46556">
    59.                             <div class=" u3b34d">
    60.                                 <img class=" ue1bec" src="http://www.guiplan.com/userWork/H1gPWyH4ix/YuanShengMoBanShiChang/images/列表模板.jpg" alt="guiplan官网" />
    61.                             div>
    62.                             <div class=" u2265a">
    63.                                 <div class=" u12e7f">{{item2.name}}
    64.                                 div>
    65.                                 <div class=" u65c2b">
    66.                                     <span class="  u8b729">通过软件打开即可
    67.                                     span>
    68.                                     <i><svg t="1649668651696" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6386" width="8" height="8">
    69.                                             <path d="M964.154 299.893c0 8.889-3.407 17.777-10.22 24.524L536.773 740.64c-13.738 13.63-35.907 13.598-49.606-0.07L69.995 324.35c-14.75-14.695-13.426-39.443 3.994-52.336 14.076-10.418 34.123-7.228 46.52 5.14L511.636 667.39a0.623 0.623 0 0 0 0.878 0.001l390.49-389.75c14.915-14.797 40.458-15.705 53.595 0.69a34.447 34.447 0 0 1 7.556 21.562z" fill="" p-id="6387">path>
    70.                                         svg>
    71.                                     i>
    72.                                 div>
    73.                                 <div class=" ua5f7f">
    74.                                     <span class="  u84e1a">软件
    75.                                     span>
    76.                                     <div class=" u5e521">
    77.                                         <span class="  udb334">6期
    78.                                         span>
    79.                                         <span class="  ue6f35">分期免息
    80.                                         span>
    81.                                     div>
    82.                                 div>
    83.                             div>
    84.                         div>
    85.                     div>
    86.                     <div class=" u563f7">
    87.                         <div class=" uf879b">
    88.                         div>
    89.                         <div class=" uf87ad">
    90.                             <div class=" uc1fa7">
    91.                                 <span class="  uad76b">￥
    92.                                 span>
    93.                                 <span class="  u6584a">99
    94.                                 span>
    95.                                 <span>.
    96.                                 span>
    97.                                 <span class="  ue3b0c">90
    98.                                 span>
    99.                             div>
    100.                             <div class=" ua9f12">
    101.                                 <div class=" u0d1ba"><svg t="1649676027820" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7447" width="16" height="16">
    102.                                         <path d="M863.74455 544.00086 163.424056 544.00086c-17.664722 0-32.00086-14.336138-32.00086-32.00086s14.336138-32.00086 32.00086-32.00086l700.320495 0c17.695686 0 31.99914 14.336138 31.99914 32.00086S881.440237 544.00086 863.74455 544.00086z" p-id="7448">path>
    103.                                     svg>
    104.                                 div>
    105.                                 <div>
    106.                                     <input v-model="searchStr" class="  ud4f2d" type="text" placeholder />
    107.                                 div>
    108.                                 <div class=" uff3ba"><svg t="1649676072403" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8427" width="16" height="16">
    109.                                         <path d="M512 512V170.666667h42.666667v341.333333h341.333333v42.666667h-341.333333v341.333333h-42.666667v-341.333333H170.666667v-42.666667h341.333333z" fill="#444444" p-id="8428">path>
    110.                                     svg>
    111.                                 div>
    112.                             div>
    113.                         div>
    114.                     div>
    115.                 div>
    116.             div>
    117.         div>
    118. template>
    119.  
    120.  
    121. <scripte>
    122. var app = new Vue({
    123.     el: '#defaultId1',
    124.     name: '',
    125.     mounted() {
    126.         // defaultLoad
    127.         // jimiMountedStart
    128.  
    129.         // jimiMountedEnd
    130.  
    131.     },
    132.     components: {},
    133.     data() {
    134.         return {
    135.             // insertData
    136.             // jimiDataStart
    137.  
    138.             list: [{
    139.                 id: '1',
    140.                 name: '店铺一',
    141.                 list: [{
    142.                     name: '商品1',
    143.                     id: '11'
    144.                 }, {
    145.                     name: '商品2',
    146.                     id: '12'
    147.                 }]
    148.             }, {
    149.                 id: '2',
    150.                 name: '店铺二',
    151.                 list: [{
    152.                     name: '商品2店铺二',
    153.                     id: '21'
    154.                 }, {
    155.                     name: '商品2店铺二',
    156.                     id: '22'
    157.                 }]
    158.             }],
    159.             searchStr: '2'
    160.             // jimiDataEnd
    161.  
    162.         }
    163.     },
    164.     methods: {
    165.         default () {},
    166.         // insertMethod
    167.         // jimiMethodStart
    168.  
    169.         // jimiMethodEnd
    170.  
    171.         // methodsCode
    172.  
    173.     },
    174.     computed: {}
    175. })
    176.  
    177.  
    178. script>
    179. <style>
    180.  
    181. .main {
    182.     margin: 0px;
    183.     padding: 0px;
    184. }
    185.  
    186. .jimicssStart {}
    187.  
    188. .uc986a {
    189.     display: flex;
    190.     flex-direction: column;
    191. }
    192.  
    193. .u57daf {
    194.     display: flex;
    195.     background-color: rgba(255, 255, 255, 1);
    196.     margin-top: 1em;
    197.     margin-left: 0.5em;
    198.     margin-bottom: 1em;
    199.     margin-right: 0.5em;
    200.     padding-top: 1em;
    201.     padding-left: 1em;
    202.     padding-right: 1em;
    203.     padding-bottom: 1em;
    204.     border-top-left-radius: 1em;
    205.     border-bottom-left-radius: 1em;
    206.     border-top-right-radius: 1em;
    207.     border-bottom-right-radius: 1em;
    208.     flex-direction: column;
    209.     box-shadow: 0em 0em 0.1em 0.1em rgba(239, 235, 235, 1);
    210. }
    211.  
    212. .ud74c1 {
    213.     display: flex;
    214.     align-items: center;
    215.     margin-bottom: 0.5em;
    216. }
    217.  
    218. .u51a08active {
    219.     display: none;
    220. }
    221.  
    222. .uc2e84 {
    223.     display: flex;
    224.     justify-content: flex-start;
    225.     align-items: center;
    226.     width: 0%;
    227.     margin-left: 0.5em;
    228.     font-weight: bold;
    229.     flex: auto;
    230.     -webkit-box-orient: vertical;
    231. }
    232.  
    233. .u51a082 {
    234.     margin-right: 0.5em;
    235. }
    236.  
    237. .u1404d {
    238.     display: -webkit-box;
    239.     font-size: 1.1em;
    240.     word-break: break-all;
    241.     text-overflow: ellipsis;
    242.     overflow: hidden;
    243.     -webkit-line-clamp: 1;
    244.     -webkit-box-orient: vertical;
    245. }
    246.  
    247. .youhuiquan {
    248.     display: flex;
    249.     justify-content: center;
    250.     align-items: center;
    251.     background-color: #FFF0F5;
    252.     margin-left: 0.5em;
    253.     border-top-left-radius: 0.9em;
    254.     border-bottom-left-radius: 0.9em;
    255.     border-top-right-radius: 0.9em;
    256.     border-bottom-right-radius: 0.9em;
    257.     text-align: center;
    258. }
    259.  
    260. .youhuiquanspan {
    261.     padding-top: 0.3em;
    262.     color: rgba(225, 54, 39, 1);
    263.     padding-left: 0.5em;
    264.     padding-right: 0.5em;
    265.     padding-bottom: 0.3em;
    266.     font-size: 0.9em;
    267. }
    268.  
    269. .u6c5f0 {
    270.     display: flex;
    271.     margin-top: 0.5em;
    272.     margin-bottom: 0.5em;
    273.     padding-left: 1.6em;
    274. }
    275.  
    276. .ua44d0 {
    277.     background-color: #F7381B;
    278.     margin-right: 0.5em;
    279.     padding-top: 0.1em;
    280.     color: #FFFFFF;
    281.     padding-left: 0.5em;
    282.     padding-right: 0.5em;
    283.     padding-bottom: 0.1em;
    284.     font-size: 0.8em;
    285.     border-top-left-radius: 0.3em;
    286.     border-bottom-left-radius: 0.3em;
    287.     border-top-right-radius: 0.3em;
    288.     border-bottom-right-radius: 0.3em;
    289. }
    290.  
    291. .ue211f {
    292.     margin-left: 0.5em;
    293.     font-weight: bold;
    294.     font-size: 0.9em;
    295.     flex: auto;
    296. }
    297.  
    298. .u7497b {
    299.     margin-bottom: 0.5em;
    300. }
    301.  
    302. .u11609 {
    303.     display: flex;
    304.     align-items: center;
    305.     margin-top: 0.5em;
    306.     margin-bottom: 0.5em;
    307. }
    308.  
    309. .u46556 {
    310.     display: flex;
    311.     margin-left: 0.5em;
    312.     flex: auto;
    313. }
    314.  
    315. .u3b34d {
    316.     margin-right: 0.5em;
    317.     border-top-left-radius: 0.5em;
    318.     border-bottom-left-radius: 0.5em;
    319.     border-top-right-radius: 0.5em;
    320.     border-bottom-right-radius: 0.5em;
    321.     overflow-x: hidden;
    322.     overflow-y: hidden;
    323. }
    324.  
    325. .ue1bec {
    326.     width: 6.6em;
    327.     height: 100%;
    328. }
    329.  
    330. .u2265a {
    331.     width: 0%;
    332.     margin-left: 0.5em;
    333.     margin-right: 0.5em;
    334.     flex: auto;
    335.     overflow-y: auto;
    336. }
    337.  
    338. .u12e7f {
    339.     display: -webkit-box;
    340.     margin-bottom: 0.5em;
    341.     color: rgba(0, 0, 0, 1);
    342.     font-weight: normal;
    343.     word-break: break-all;
    344.     text-overflow: ellipsis;
    345.     overflow: hidden;
    346.     -webkit-line-clamp: 2;
    347.     -webkit-box-orient: vertical;
    348. }
    349.  
    350. .u65c2b {
    351.     display: flex;
    352.     width: max-content;
    353.     background-color: rgba(234, 230, 230, 1);
    354.     margin-bottom: 0.5em;
    355.     padding-top: 0.2em;
    356.     color: rgba(89, 88, 88, 1);
    357.     padding-left: 0.5em;
    358.     padding-right: 0.5em;
    359.     padding-bottom: 0.2em;
    360.     font-size: 0.8em;
    361.     border-top-left-radius: 0.5em;
    362.     border-bottom-left-radius: 0.5em;
    363.     border-top-right-radius: 0.5em;
    364.     border-bottom-right-radius: 0.5em;
    365. }
    366.  
    367. .u8b729 {
    368.     display: -webkit-box;
    369.     margin-right: 0.5em;
    370.     word-break: break-all;
    371.     text-overflow: ellipsis;
    372.     overflow: hidden;
    373.     -webkit-line-clamp: 1;
    374.     -webkit-box-orient: vertical;
    375. }
    376.  
    377. .ua5f7f {
    378.     display: flex;
    379.     align-items: center;
    380. }
    381.  
    382. .u84e1a {
    383.     color: rgba(58, 200, 60, 1);
    384.     padding-left: 0.2em;
    385.     padding-right: 0.2em;
    386.     font-size: 0.8em;
    387.     border-top-left-radius: 0.3em;
    388.     border-bottom-left-radius: 0.3em;
    389.     border-top-right-radius: 0.3em;
    390.     border-bottom-right-radius: 0.3em;
    391.     border-style: solid;
    392.     border-width: 1px;
    393.     border-color: rgba(58, 200, 60, 1);
    394. }
    395.  
    396. .u5e521 {
    397.     display: flex;
    398.     background-color: rgba(248, 57, 28, 1);
    399.     margin-left: 0.5em;
    400.     border-top-left-radius: 0.3em;
    401.     border-bottom-left-radius: 0.3em;
    402.     border-top-right-radius: 0.3em;
    403.     border-bottom-right-radius: 0.3em;
    404.     overflow-x: hidden;
    405.     overflow-y: hidden;
    406.     border-style: solid;
    407.     border-width: 1px;
    408.     border-color: rgba(255, 69, 0, 1);
    409. }
    410.  
    411. .udb334 {
    412.     background-color: rgba(255, 255, 255, 1);
    413.     color: #F62415;
    414.     padding-left: 0.1em;
    415.     padding-right: 0.1em;
    416.     font-size: 0.8em;
    417.     border-top-right-radius: 0.5em;
    418.     border-bottom-right-radius: 0.5em;
    419. }
    420.  
    421. .ue6f35 {
    422.     color: rgba(247, 247, 247, 1);
    423.     padding-left: 0.3em;
    424.     padding-right: 0.3em;
    425.     font-size: 0.8em;
    426. }
    427.  
    428. .u563f7 {
    429.     display: flex;
    430.     margin-bottom: 0.5em;
    431. }
    432.  
    433. .uf879b {
    434.     width: 9.3em;
    435. }
    436.  
    437. .uf87ad {
    438.     display: flex;
    439.     justify-content: space-between;
    440.     flex: auto;
    441. }
    442.  
    443. .uc1fa7 {
    444.     display: flex;
    445.     align-items: flex-end;
    446.     color: rgba(255, 69, 0, 1);
    447. }
    448.  
    449. .uad76b {
    450.     font-size: 0.8em;
    451. }
    452.  
    453. .u6584a {
    454.     font-size: 1.3em;
    455.     font-weight: bold;
    456.     margin-bottom: -0.1em;
    457. }
    458.  
    459. .ue3b0c {
    460.     font-size: 0.9em;
    461. }
    462.  
    463. .ua9f12 {
    464.     display: flex;
    465.     border-top-left-radius: 1em;
    466.     border-bottom-left-radius: 1em;
    467.     border-top-right-radius: 1em;
    468.     border-bottom-right-radius: 1em;
    469.     border-style: solid;
    470.     border-width: 1px;
    471.     border-color: rgba(238, 236, 235, 1);
    472. }
    473.  
    474. .u0d1ba {
    475.     display: flex;
    476.     align-items: center;
    477.     padding-top: 0.2em;
    478.     padding-left: 0.5em;
    479.     padding-right: 0.5em;
    480.     padding-bottom: 0.1em;
    481.     border-right-style: solid;
    482.     border-right-width: 1px;
    483.     border-right-color: rgba(238, 236, 235, 1);
    484. }
    485.  
    486. .ud4f2d {
    487.     width: 2em;
    488.     height: 1.5em;
    489.     background-color: inherit;
    490.     padding-left: 0.5em;
    491.     padding-right: 0.5em;
    492.     flex: auto;
    493.     text-align: center;
    494.     border-style: none;
    495.     outline: none;
    496. }
    497.  
    498. .uff3ba {
    499.     display: flex;
    500.     align-items: center;
    501.     padding-top: 0.1em;
    502.     padding-left: 0.5em;
    503.     padding-right: 0.5em;
    504.     padding-bottom: 0.1em;
    505.     border-left-style: solid;
    506.     border-left-width: 1px;
    507.     border-left-color: rgba(238, 236, 235, 1);
    508. }
    509.  
    510. @media (min-width: 576px) {}
    511.  
    512. @media (min-width: 768px) {}
    513.  
    514. @media (min-width: 992px) {}
    515.  
    516. @media (min-width: 1200px) {}
    517.  
    518. .jimicssEnd {}
    519.  
    520. style>

     

     

     

  • 相关阅读:
    【SSL证书安全】
    Redis集群模式和常用数据结构
    陕西省助理评审申报，看这文章就够了
    2.2 发布与订阅python
    电阻值过大的原因、影响和解决方法 | 百能云芯
    淘宝服务端高并发分布式架构演进之路
    【分析思路】测试数据分析思路
    算法通关村第18关【黄金】| 继续回溯
    灵活运用Vue指令：探究v-if和v-for的使用技巧和注意事项
    Ubuntu 23.10/24.04 LTS 放弃默认使用 snap 版 CUPS 打印堆栈
  • 原文地址：https://blog.csdn.net/guige8888811/article/details/126447943