392 lines
20 KiB
Vue
392 lines
20 KiB
Vue
<!-- 首页页面的生长建议组件 -->
|
||
<template>
|
||
<div id="all">
|
||
<div class="top-box">
|
||
<div class="top">
|
||
<h2 class="dl">作物生长建议</h2>
|
||
</div>
|
||
<div class="middle">
|
||
<div class="m-photo">
|
||
<img src="../assets/wj.png" alt="" class="crop-image">
|
||
</div>
|
||
<div class="split-container">
|
||
<div class="half-box">
|
||
<h3>玉米</h3>
|
||
<p>品种:<span class="info"> 先玉335</span></p>
|
||
|
||
<p>亩产量:<span class="info"> 450-500公斤</span></p>
|
||
<!-- <p>生长周期: <span class="info">90-110天</span></p>-->
|
||
</div>
|
||
<div class="half-box">
|
||
<p class="right">生长周期: <span class="info">90-110天</span></p>
|
||
<!-- <p class="right">种植季节:<span class="info"> 7-8月（夏季播种，秋末收获）</span></p>-->
|
||
|
||
<p class="right">种植季节:<span class="info"> 7-8月（夏季播种，秋末收获）</span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="under">
|
||
<h3>推荐种植原因</h3>
|
||
<div class="u-top">
|
||
<div class="climate-box">
|
||
<div class="climate-content">
|
||
<svg t="1747911928464" class="climate-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3433" width="35" height="35">
|
||
<path d="M752.41931153 240.7063601c8.36993432 0 15.62255883 3.08990502 21.72821045 9.16589356 6.1353147 6.08093262 9.18566918 13.3928833 9.18566918 21.73315382 0 8.55285621-3.05035376 15.85986352-9.18566918 21.94079614l-43.67394996 43.66900658c-5.93261719 5.97216773-13.17041016 8.95825195-21.72326709 8.95825195-8.87420678 0-16.20098901-2.98608422-22.08911085-8.75061035-5.88317847-5.87329102-8.80004906-13.2890625-8.80004906-22.14843774 0-8.54791283 2.95642114-15.75604272 8.91375732-21.72821044l43.66900659-43.67394996c6.14025879-6.07598853 13.44726539-9.16589356 21.98034668-9.16589356z m37.66223167 240.39459181h61.79809547c8.52813721 0 15.82031227 2.98608422 21.83697534 9.06207276C879.78271508 496.24395728 882.78857422 503.45208717 882.78857422 512c0 8.55285621-3.00585914 15.85986352-9.07196021 21.83697533-6.01666236 6.07598853-13.30883813 9.06207276-21.83697534 9.06207276h-61.79809547c-8.52813721 0-15.80053734-2.98608422-21.86663841-9.06207276-6.01666236-5.97711182-9.05712867-13.2890625-9.05712867-21.83697533 0-8.55285621 3.04046631-15.76098609 9.05712867-21.83697533 6.06610107-6.07598853 13.33850122-9.06207276 21.86663841-9.06207276zM512 141.21142578c8.52813721 0 15.79064917 3.08990502 21.85180688 9.06207276 6.02160645 6.08093262 9.05712867 13.3928833 9.05712867 21.83697533v61.79809546c0 8.55285621-3.03552222 15.85986352-9.0521853 21.83697534-6.06610107 6.07598853-13.32861305 9.16589356-21.85675025 9.16589355-8.53802467 0-15.80053734-3.08990502-21.86663842-9.16589355-6.01666236-5.97711182-9.0521853-13.2890625-9.05218458-21.83697534V172.11047387c0-8.44409203 3.03552222-15.76098609 9.05218458-21.83697533C496.20440674 144.3013308 503.46691871 141.21142578 512.00494408 141.21142578zM271.81304907 240.7063601c8.36499023 0 15.61267066 3.08990502 21.743042 9.16589356l43.66900659 43.67394996c6.14025879 6.07598853 9.17083764 13.38793922 9.17083764 21.72821044 0 8.55285621-3.01080323 15.86480689-9.05712938 21.83697534-6.03149391 6.08093262-13.30389404 9.06207276-21.85180617 9.06207275-8.69622827 0-16.02795386-2.98608422-21.95068359-8.85443115l-43.68383814-43.67395068c-5.97216773-5.97216773-8.92858886-13.28411842-8.92858886-22.03967284 0-8.55285621 3.00585914-15.76098609 9.07196021-21.83697462 6.01666236-5.97216773 13.30883813-9.06207276 21.85675096-9.06207276h-0.03955126z m436.93725586 436.91253615c8.36499023 0 15.60772729 2.98608422 21.72326709 9.16589355l43.67394995 43.67395067c6.1353147 6.17980933 9.18566918 13.38793922 9.18566919 21.93585205 0 8.34521461-3.05035376 15.65716529-9.18566919 21.73315382-6.1105957 6.17980933-13.35827613 9.16589356-21.72326636 9.16589356-8.52813721 0-15.84008789-2.98608422-21.98034668-9.16589356l-43.66900659-43.66900587c-5.95733618-5.87329102-8.91375732-13.1852417-8.91375732-21.73315453 0-8.55285621 3.01080323-15.86480689 9.05712866-21.94079614 6.03149391-6.07598853 13.32861305-9.16589356 21.85180689-9.16589355h-0.01977564zM512.00494408 388.40380836c-34.12243628 0-63.22192359 12.05310035-87.39239525 36.2532351-24.1358645 24.10125732-36.21368384 53.25018335-36.21368384 87.34295654 0 34.0927732 12.07782007 63.24169922 36.21368384 87.44677734C448.78796387 623.53814721 477.88250709 635.59619164 512 635.59619164c34.12243628 0 63.23181176-12.05310035 87.4072268-36.15435838C623.51837158 575.2466433 635.59619164 546.09771729 635.59619164 512c0-34.0927732-12.07782007-63.24169922-36.18896484-87.34295654C575.23181176 400.45690942 546.12243628 388.40380836 512 388.40380836zM172.12036133 481.10095191h61.79809547c8.53802467 0 15.80053734 2.98608422 21.86663841 9.06207276 6.01666236 6.08093262 9.05712867 13.2890625 9.05712867 21.83697533 0 8.55285621-3.04046631 15.85986352-9.05712867 21.83697533-6.06610107 6.07598853-13.32861305 9.06207276-21.86663841 9.06207276h-61.79809547c-8.52813721 0-15.81042481-2.98608422-21.83697534-9.06207276C144.21728492 527.85986352 141.21142578 520.54791283 141.21142578 512c0-8.55285621 3.00585914-15.76098609 9.07196021-21.83697533 6.03149391-6.07598853 13.30883813-9.06207276 21.83697534-9.06207276zM512.00494408 759.19238258c8.52813721 0 15.79064917 2.98608422 21.85180617 9.06207274 6.02160645 6.08093262 9.05712867 13.2890625 9.05712938 21.83697535v61.79809546c0 8.55285621-3.03552222 15.85986352-9.0521853 21.83697533C527.79559326 879.80249 520.53308129 882.78857422 512 882.78857422c-8.53802467 0-15.80053734-2.98608422-21.86663842-9.06207276-6.01666236-5.97711182-9.0521853-13.2890625-9.05218458-21.83697533v-61.79809546c0-8.55285621 3.03552222-15.76098609 9.05218458-21.83697534 6.06610107-6.07598853 13.32861305-9.06207276 21.86663842-9.06207275z m-196.47839379-81.57348633c8.5034182 0 15.80053734 2.98608422 21.84686279 9.16589355 6.03149391 6.08093262 9.07196021 13.3928833 9.07196021 21.94079614 0 8.44409203-3.08001685 15.65222192-9.19555664 21.72821044l-43.67394995 43.67394996c-6.10565162 6.17980933-13.34838867 9.16589356-21.72326637 9.16589356-8.54791283 0-15.84008789-2.98608422-21.85180687-8.96319533-6.07104516-6.07598853-9.0769043-13.38793922-9.0769043-21.93585205 0-8.65173364 2.95642114-15.96862769 8.92858887-21.94079614l43.68383813-43.66900658c6.10565162-6.17980933 13.44232202-9.16589356 21.95068359-9.16589355h0.03955054zM512 326.60571289c33.628052 0 64.6506958 8.34521461 93.0481565 24.81811547 28.42712378 16.69042992 50.92163109 39.1404419 67.4637456 67.56756568 16.57177758 28.32824708 24.86755347 59.32617188 24.86755347 93.00860596 0 33.68243408-8.27600098 64.68035888-24.86755347 93.10748267-16.58166504 28.32824708-39.08605981 50.77825904-67.4637456 67.4637456-28.36285424 16.58166504-59.37561059 24.82305884-93.0481565 24.82305884-33.66760254 0-64.67047143-8.24139381-93.05804468-24.81811547-28.37768578-16.69042992-50.86230492-39.14538598-67.46374487-67.46868897-16.58166504-28.42712378-24.86755347-59.42504859-24.86755348-93.10748267 0-33.68243408 8.31555152-64.68035888 24.86755348-93.00860596 16.55200195-28.42712378 39.03662109-50.87713647 67.46374487-67.56262231C447.35424828 334.94598413 478.371948 326.60571289 512 326.60571289z" p-id="3434" fill="#49aa4e"></path>
|
||
</svg>
|
||
<div class="climate-text">
|
||
<h3>气候适应性</h3>
|
||
<p>7-8月高温多雨，正适玉米生长（20-30℃）及关键期需水</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="box">
|
||
<div class="box-content">
|
||
<svg t="1747912173050" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8097" width="24" height="24">
|
||
<path d="M706.349486 674.145864a22.805678 22.805678 0 0 0-22.805678 22.805678 171.669114 171.669114 0 0 1-171.669114 171.669114 22.805678 22.805678 0 1 0 0 45.611356 217.531082 217.531082 0 0 0 217.28047-217.28047 22.805678 22.805678 0 0 0-22.805678-22.805678z" p-id="8098" fill="#49aa4e"></path>
|
||
<path d="M511.874694 1024A324.041116 324.041116 0 0 1 188.334802 699.958884C188.334802 514.004895 399.851199 170.917279 490.823299 31.827704L511.874694 0l21.051395 31.827704c70.923152 108.013705 302.739109 476.162506 302.739109 668.13118a324.291728 324.291728 0 0 1-323.790504 324.041116z m0-932.276065C426.917279 225.550661 238.457171 537.81302 238.457171 699.958884a273.668135 273.668135 0 1 0 547.085658 0c0-134.829173-137.585903-396.467939-273.668135-608.234949z" p-id="8099" fill="#49aa4e"></path>
|
||
</svg>
|
||
<div class="box-text">
|
||
<h3>经济效益</h3>
|
||
<p>市场需求稳定</p>
|
||
<p>预计亩产量: <span class="info">450-500公斤</span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="grid-container">
|
||
<div class="grid-item">
|
||
<div class="item-content01">
|
||
<svg t="1747916046353" class="icon02" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14035" width="200" height="200"><path d="M205.498 121.018l1.164-4.654c1.629-7.448 3.49-16.524 4.887-23.273l6.982-46.546L256 69.818a391.913 391.913 0 0 0 61.44 31.418l12.567 4.888a690.27 690.27 0 0 0 85.877 23.272 865.513 865.513 0 0 1 133.818 39.564c143.825 56.087 241.57 151.738 276.48 270.43A376.785 376.785 0 0 1 763.112 768a53.527 53.527 0 0 0-9.076 26.996 314.182 314.182 0 0 1-5.352 161.513 30.022 30.022 0 0 1-27.23 20.946 31.418 31.418 0 0 1-11.403-1.397 30.487 30.487 0 0 1-19.55-37.934 249.018 249.018 0 0 0 7.68-117.76l-23.272-7.448a570.415 570.415 0 0 0-154.53-26.298h-11.637a312.087 312.087 0 0 1-85.877-21.41c-94.952-39.332-306.501-178.968-217.367-644.19z m240.407 587.404a240.407 240.407 0 0 0 68.422 17.222h11.171a661.41 661.41 0 0 1 153.833 24.901A667.23 667.23 0 0 0 558.545 546.91a696.553 696.553 0 0 0-93.09-84.48l-16.99-13.73a318.37 318.37 0 0 1-76.101-89.135 30.255 30.255 0 0 1 52.829-29.324 252.975 252.975 0 0 0 63.534 71.68l16.99 13.73a750.778 750.778 0 0 1 99.374 90.765 782.662 782.662 0 0 1 124.276 204.567A311.855 311.855 0 0 0 768 456.61c-20.945-70.982-79.36-168.727-239.476-230.633a817.804 817.804 0 0 0-125.673-36.77 656.756 656.756 0 0 1-107.055-31.419l-12.334-5.12c-6.75-3.025-13.731-6.05-20.713-9.774-76.567 412.858 102.4 532.014 183.156 565.527z" p-id="14036" fill="#49aa4e"></path></svg>
|
||
<div class="item-text01">
|
||
<h3>土壤建议</h3>
|
||
<p>PH值6.0-7.0，疏松透气的壤土</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="grid-item">
|
||
<div class="item-content">
|
||
<svg t="1747916349615" class="icon01" viewBox="0 0 1104 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15395" width="200" height="200"><path d="M961.369 1020.986H141.063c-55.01 0-99.202-21.701-121.272-59.552-22.076-37.85-19.39-87.293 7.396-135.606l413.89-746.48c26.941-48.666 67.004-76.561 109.866-76.561 42.867 0 82.89 27.86 109.907 76.483l414.323 746.635c26.78 48.314 29.55 97.72 7.433 135.565-22.035 37.85-66.263 59.516-121.237 59.516zM550.984 81.148c-13.628 0-29.239 13.595-41.894 36.362L95.202 864.067c-12.968 23.43-16.004 44.475-8.258 57.752 7.753 13.244 27.488 20.85 54.119 20.85h820.306c26.673 0 46.372-7.565 54.119-20.85 7.704-13.242 4.71-34.28-8.293-57.71l-414.318-746.6c-12.618-22.766-28.306-36.361-41.893-36.361z m0.233 586.348c-21.488 0-38.93-17.516-38.93-39.182v-352.63c0-21.63 17.442-39.183 38.93-39.183 21.492 0 38.934 17.554 38.934 39.183v352.63c0 21.666-17.442 39.182-38.934 39.182z m-0.279 191.523c33.503 0 60.663-27.382 60.663-61.16 0-33.777-27.16-61.159-60.663-61.159s-60.663 27.382-60.663 61.16c0 33.777 27.16 61.16 60.663 61.16z" p-id="15396" fill="#49aa4e"></path></svg><div class="item-text">
|
||
<h3>病虫害防治</h3>
|
||
<p>注意防治大斑病和玉米螟</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="grid-item">
|
||
<div class="item-content">
|
||
<svg t="1747916476746" class="icon01" viewBox="0 0 1067 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="30481" id="mx_n_1747916476746" data-spm-anchor-id="a313x.search_index.0.i27.42e63a81a77nKn" width="200" height="200"><path d="M511.902447 1023.528869a2012.079337 2012.079337 0 0 1-428.595965-36.749733 106.954049 106.954049 0 0 1-61.299863-169.285219c0.477923-0.603692 0.955845-1.232537 1.458922-1.811075L379.417269 398.582173q1.081614-1.282845 2.288998-2.515382a214.662713 214.662713 0 0 1 303.204164 0q1.18223 1.18223 2.263844 2.515382l355.951728 417.100669c0.503076 0.603692 1.006153 1.207383 1.458922 1.811075a106.928895 106.928895 0 0 1-61.299863 169.285219 2530.222906 2530.222906 0 0 1-471.382615 36.749733z m-422.584202-153.589234a21.783209 21.783209 0 0 0-2.515382 20.123057 20.575826 20.575826 0 0 0 15.092293 13.432141 1929.29811 1929.29811 0 0 0 410.007291 34.68712 2483.864413 2483.864413 0 0 0 452.944864-34.68712 20.525518 20.525518 0 0 0 15.092293-13.432141 21.707748 21.707748 0 0 0-2.515382-20.123057L623.585414 455.278887a129.265489 129.265489 0 0 0-180.378054 0z" fill="#49aa4e" p-id="30482" data-spm-anchor-id="a313x.search_index.0.i26.42e63a81a77nKn" class=""></path><path d="M359.74698 856.935109h-141.364476l158.745767-199.947727h97.772904a21.405902 21.405902 0 0 1 15.922369 34.863196z" fill="#49aa4e" p-id="30483" data-spm-anchor-id="a313x.search_index.0.i29.42e63a81a77nKn" class=""></path><path d="M182.362231 393.450794a52.823025 52.823025 0 0 1-1.333152-9.432683 65.223859 65.223859 0 0 1 37.98227-59.539096 46.308185 46.308185 0 0 1 56.721868 12.903911 52.672102 52.672102 0 0 1 11.545604 44.773802 65.827551 65.827551 0 0 1-44.144957 48.094107 45.855417 45.855417 0 0 1-32.498737-2.515382 50.68495 50.68495 0 0 1-28.272896-34.284659z m435.462958-147.099548a55.338407 55.338407 0 0 1-6.313609-7.546147 67.915318 67.915318 0 0 1 1.408614-73.600082 48.270183 48.270183 0 0 1 57.451328-19.343288 54.885639 54.885639 0 0 1 34.586505 33.555198 68.619625 68.619625 0 0 1-13.130295 66.758242 47.792261 47.792261 0 0 1-30.184586 15.494754 52.823025 52.823025 0 0 1-43.817957-15.318677z m-42.25842-129.315797a62.306016 62.306016 0 0 0 7.168839-8.602607 76.694002 76.694002 0 0 0-1.182229-83.007611 54.458024 54.458024 0 0 0-64.695629-22.135363 61.903555 61.903555 0 0 0-39.214808 37.730733 77.398309 77.398309 0 0 0 14.438293 75.461464 53.90464 53.90464 0 0 0 34.007967 17.607675 59.589403 59.589403 0 0 0 49.477567-17.054291z m-186.515586 185.232742a44.245572 44.245572 0 0 1-5.030765-6.137533 54.407716 54.407716 0 0 1 1.131922-58.885096 38.611116 38.611116 0 0 1 45.956032-15.4696 43.918572 43.918572 0 0 1 27.669204 26.839128 54.910792 54.910792 0 0 1-10.489144 53.401563 38.233809 38.233809 0 0 1-24.172822 12.37568 42.25842 42.25842 0 0 1-35.039274-12.149296z" fill="#49aa4e" p-id="30484" data-spm-anchor-id="a313x.search_index.0.i28.42e63a81a77nKn" class=""></path></svg><div class="item-text">
|
||
<h3>施肥建议</h3>
|
||
<p>基肥足量，分时追肥促穗壮</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
|
||
|
||
}
|
||
|
||
#all {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
|
||
}
|
||
|
||
.top {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 6px;
|
||
margin-bottom: 20px;
|
||
|
||
|
||
}
|
||
|
||
.top h1 {
|
||
padding-left: 10px;
|
||
font-size: 26.2px;
|
||
}
|
||
|
||
.top p {
|
||
padding-right: 10px;
|
||
}
|
||
|
||
.middle {
|
||
display: flex;
|
||
align-items: flex-start; /* 顶部对齐 */
|
||
gap: 20px; /* 图片和分割容器之间的间距 */
|
||
width: 100%;
|
||
}
|
||
|
||
.crop-image {
|
||
width: 180px;
|
||
height: 180px;
|
||
border-radius: 13px;
|
||
object-fit: cover; /* 保持图片比例 */
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.split-container {
|
||
display: flex;
|
||
flex: 1; /* 占据剩余空间 */
|
||
gap: 15px; /* 两个half-box之间的间距 */
|
||
margin-left: 10px;
|
||
margin-right: 10px;
|
||
height: 180px;
|
||
}
|
||
|
||
.half-box {
|
||
flex: 1;
|
||
border-radius: 8px;
|
||
text-align: left;
|
||
}
|
||
.half-box h3{
|
||
font-size: 20px;
|
||
letter-spacing: 2px;
|
||
}
|
||
.half-box p{
|
||
margin-top: 10px;
|
||
font-size: 16px;
|
||
line-height: 30px;
|
||
}
|
||
.info{
|
||
padding-left: 12px;
|
||
letter-spacing: 1px;
|
||
}
|
||
.right{
|
||
position: relative;
|
||
top: 27px;
|
||
font-size: 16px;
|
||
}
|
||
.under h3{
|
||
margin-top: 18px;
|
||
margin-bottom: 20px;
|
||
text-align: left;
|
||
margin-left: 10px;
|
||
}
|
||
.u-top{
|
||
display: grid; /* 启用 grid 布局 */
|
||
grid-template-columns: 1fr 1fr; /* 两列，每列占 1fr（等分） */
|
||
width: 100%;
|
||
margin-left: 11px;
|
||
gap: 10px;
|
||
margin-right: 10px;
|
||
position: relative;
|
||
left: -8px;
|
||
}
|
||
.box {
|
||
text-align: center;
|
||
padding: 10px;
|
||
background-color: #F0FDF4;
|
||
height: 115px;
|
||
margin-right: 10px;
|
||
border-radius: 9px;
|
||
}
|
||
.icon{
|
||
position: relative;
|
||
top: -30px;
|
||
left: 5px;
|
||
}
|
||
.climate-box {
|
||
text-align: left;
|
||
padding: 15px;
|
||
background-color: #F0FDF4;
|
||
height: 115px;
|
||
border-radius: 9px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
}
|
||
|
||
.climate-content {
|
||
display: flex;
|
||
flex-direction: row; /* 改为水平排列 */
|
||
align-items: center; /* 垂直居中 */
|
||
width: 90%;
|
||
}
|
||
|
||
.climate-icon {
|
||
width: 42px;
|
||
height: 35px;
|
||
margin-right: 10px; /* 图标和文字之间的间距 */
|
||
position: relative;
|
||
top: -27px;
|
||
}
|
||
|
||
.climate-text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
top: -11px;
|
||
}
|
||
.climate-box h3 {
|
||
font-size: 18px;
|
||
color: #49AA50;
|
||
padding-top: 15px;
|
||
margin: 7px 0;
|
||
}
|
||
|
||
.climate-box p {
|
||
font-size: 15.7px;
|
||
color: #333;
|
||
line-height: 1.7;
|
||
margin: 0;
|
||
}
|
||
.dl{
|
||
padding-left: 10px;
|
||
}
|
||
/* 调整原有样式 */
|
||
.u-top {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
width: 100%;
|
||
gap: 20px;
|
||
padding: 0 10px;
|
||
}
|
||
|
||
.box {
|
||
text-align: left; /* 改为左对齐 */
|
||
padding: 10px;
|
||
background-color: #F0FDF4;
|
||
height: 115px;
|
||
margin-right: 10px;
|
||
border-radius: 9px;
|
||
display: flex; /* 启用 flex 布局 */
|
||
align-items: center; /* 垂直居中 */
|
||
}
|
||
|
||
.box-content {
|
||
display: flex;
|
||
flex-direction: row; /* 水平排列 */
|
||
align-items: center; /* 垂直居中 */
|
||
width: 100%;
|
||
}
|
||
|
||
.icon {
|
||
width: 22px;
|
||
height: 24px;
|
||
margin-right: 17px; /* 图标和文字之间的间距 */
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.box-text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.box h3 {
|
||
font-size: 18px;
|
||
color: #49AA50;
|
||
margin: 5px 0;
|
||
position: relative;
|
||
top: -2px;
|
||
}
|
||
|
||
.box p {
|
||
font-size: 15.7px;
|
||
color: #333;
|
||
line-height: 1.8;
|
||
position: relative;
|
||
top: -4px;
|
||
}
|
||
|
||
/* 底下的建议*/
|
||
.grid-container {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr); /* 3 列，每列等宽 */
|
||
gap: 10px; /* 设置间隙为 10px */
|
||
margin-top: 20px;
|
||
margin-left: 12px;
|
||
margin-right: 16px;
|
||
}
|
||
|
||
.grid-item {
|
||
background-color: #F9FAFB;
|
||
padding: 10px;
|
||
text-align: left; /* 改为左对齐 */
|
||
border-radius: 8px;
|
||
height: 90px;
|
||
display: flex; /* 启用 flex 布局 */
|
||
align-items: center; /* 垂直居中 */
|
||
}
|
||
|
||
.item-content {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-start; /* 改为顶部对齐 */
|
||
padding-top: 20px; /* 添加顶部内边距 */
|
||
width: 100%;
|
||
}
|
||
|
||
.icon01{
|
||
width: 24px;
|
||
height: 24px;
|
||
margin-right: 10px; /* 图标和文字之间的间距 */
|
||
position: relative;
|
||
top: -17px;
|
||
}
|
||
.icon02{
|
||
width: 34px;
|
||
height: 34px;
|
||
margin-right: 10px; /* 图标和文字之间的间距 */
|
||
position: relative;
|
||
top: 0;
|
||
}
|
||
.item-text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.item-text h3 {
|
||
font-size: 16px;
|
||
color: black;
|
||
margin: 0;
|
||
}
|
||
|
||
.item-text p {
|
||
font-size: 14px;
|
||
color: #333;
|
||
margin: 0;
|
||
line-height: 1.5;
|
||
}
|
||
.item-content h3{
|
||
font-size: 16px;
|
||
color: black;
|
||
margin: 0;
|
||
position: relative;
|
||
top: -12px;
|
||
}
|
||
.item-content01 {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-start; /* 改为顶部对齐 */
|
||
padding-top: 20px; /* 添加顶部内边距 */
|
||
width: 100%;
|
||
}
|
||
.item-content01 h3{
|
||
font-size: 16.4px;
|
||
color: black;
|
||
position: relative;
|
||
top: -13px;
|
||
right: 9px;
|
||
}
|
||
.item-text01 p{
|
||
position: relative;
|
||
top: -19px;
|
||
font-size: 14px;
|
||
}
|
||
</style>
|
||
|
||
<script setup lang="ts">
|
||
|
||
import {paddingLeft} from "html2canvas/dist/types/css/property-descriptors/padding";
|
||
</script> |