<div class="coretop1"> <div style="display:inline-block;width:90%;margin-left:5%;"> <p class="coreziti1">{{$t("CORE.DRIVERLISTINFO02")}}</p> </div> <div style="display:inline-block;width:50%;margin-left:50%;"> <div class="driverListPh1"><img src="../assets/images/coreP02.png" alt /> </div> </div> </div> .coretop2, .coretop1{ background-image: radial-gradient(closest-side at 50% 70%,#bfc7c6,#899796); } .coreziti1{ font-size: 50px; } .driverListPh1 img { width: 100%; height: 100%; } 文字底部居中 text-align: center; <div class="titleInfo1" >{{$t("FREEDOMINFO.CONTROLINFO")}} </div> .titleInfo1 { text-align: center; margin: 30px 50px; font-size: 50px; }
<div class="highTorque"> <!-- <img src="../../assets/images/servo03.jpg" width="100%" alt /> --> <div class="highTorqueMain"> <h2> <span>{{$t("SERVOMOTOR.HIGH_TITLE")}}</span> </h2> <div class="highTorqueInfoMain"> <div class="highTorqueInfo"> <div class="TextHigh1"> <div>Ultra-Compact</div> <div>Force Control</div> <div>Lightweight</div> </div> <div class="centerPhHigh"> <img src="../../assets/images/servo04.png" width="100%" alt /> </div> <div clas_isMobile() { let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i) return flag; },s="TextHigh2"> <div>Native Standard Ethernet Protocol</div> <div>Supporting 100Mbps</div> <div>Supporting WIFI</div> </div> </div> </div> </div> </div> background-image: radial-gradient(farthest-side circle at 82% 101%,#BEC1C8,#899297); .highTorque { position: relative; min-height: 300px; background-image: radial-gradient(farthest-side circle at 82% 101%,#BEC1C8,#899297); box-shadow: inset 0 -1px 0 0 rgba(205, 208, 207, 0.2); padding: 30px 0; } .highTorqueMain { display: flex; flex-direction: column; } .highTorqueMain h2 { text-align: center; margin: 30px 0 0; } .highTorqueMain h2 span { width: 500px; display: inline-block; } .highTorqueInfoMain { display: flex; justify-content: center; align-items: center; flex: 1; margin-top: 30px; } .highTorqueInfo { display: flex; justify-content: center; } .centerPhHigh { width: 30%; margin: 0 10%; } .TextHigh1 { display: flex; width: 350px; height: 800px; font-size: 38px; margin: 0 auto; flex-direction: column; justify-content: space-between; align-content: space-between; } .TextHigh2 { display: flex; width: 350px; height: 800px; font-size: 38px; margin: 0 auto; flex-direction: column; justify-content: space-between; align-content: space-between; } .DigitalOneInfo { margin: 1% 20%; text-align: center; }
<div class="corexia"> <div class="driverTit"> <div class="driverTitCon"> <h2> <div class="white">{{$t("SERVOMOTOR.DRIVERTITCON_TITLE_01")}} {{$t("SERVOMOTOR.DRIVERTITCON_TITLE_02")}}</div> </h2> </div> </div> <div class="coretop1"> <div style="display:inline-block;width:50%;margin-left:20%;"> <p class="coreziti1">{{$t("SERVOMOTOR.WITH ")}}</p> </div> <div style="display:inline-block;width:50%;margin-left:50%;"> <div class="driverListPh1"><img src="../../assets/images/servo06.png" alt /> </div> </div> </div> </div> background-image: radial-gradient(farthest-side circle at 50% 105%,#BEC1C8,#899297); background-image: radial-gradient(farthest-side at 50% 50%,#BEC1C8,#899297); .corexia{ position: relative; min-height: 300px; background-image: radial-gradient(farthest-side circle at 50% 50%,#BEC1C8,#899297); // background-image: radial-gradient(50% 105%, #bec1c8 0%, #899297 100%); box-shadow: inset 0 -1px 0 0 rgba(205, 208, 207, 0.2); padding: 30px 0; } .driverTit { display: flex; flex-direction: column; text-align: center; margin: 0 30px; align-items: center; } .driverTitCon { margin: 6px 0; } .coretop2, .coretop1{ background-image: radial-gradient(farthest-side circle at 50% 50%,#BEC1C8,#899297); } .coreziti1{ font-size: 60px; } .driverListPh1 { width: 360px; height: 360px; padding: 1px; background-image: radial-gradient(farthest-side circle at 50% 50%,#BEC1C8,#899297); border:2px solid rgba(205,208,207,0.1); border-radius: 180px; box-sizing: border-box; overflow: hidden; } .driverListPh1 img { width: 100%; height: 100%; }