Skip to content

A
admin
提交 de86348d authored 作者: leon's avatar leon
浏览文件
操作

商品详情,商品列表

上级 3811c2f5
隐藏空白字符变更
内嵌 并排
正在显示 包含 875 行增加 和 7 行删除
src/css/nicepage.css 0 → 100644
浏览文件 @ de86348d
This source diff could not be displayed because it is too large. You can view the blob instead.
src/main.ts
浏览文件 @ de86348d
......@@ -2,6 +2,8 @@ import '/@/design/index.less';
import 'virtual:windi-base.css';
import 'virtual:windi-components.css';
import 'virtual:windi-utilities.css';
// nicepage全局样式
import '/@/css/nicepage.css';
// Register icon sprite
import 'virtual:svg-icons-register';
import App from './App.vue';
......
src/views/store/goodDetail/index.vue
浏览文件 @ de86348d
<template> 详情 </template>
<template>
<div class="u-body u-xl-mode" data-lang="en">
<section class="u-clearfix u-section-1" id="carousel_2beb">
<div class="u-clearfix u-sheet u-valign-middle-lg u-sheet-1"
><!--product--><!--product_options_json-->
<!--{"source":""}--><!--/product_options_json--><!--product_item-->
<div class="u-container-style u-expanded-width u-product u-product-1">
<div class="u-container-layout u-valign-top-md u-valign-top-sm u-valign-top-xs u-container-layout-1">
<!--product_image-->
<img
alt=""
class="u-image u-image-default u-product-control u-image-1"
src="images/5660510982_7_1_16.jpg"
/>
<!--/product_image-->
<div
class="u-align-left u-container-style u-expanded-width-md u-expanded-width-sm u-expanded-width-xs u-group u-shape-rectangle u-group-1"
>
<div class="u-container-layout u-valign-middle-lg u-valign-middle-xl u-container-layout-2">
<!--product_title-->
<h2 class="u-product-control u-text u-text-1">
<a class="u-product-title-link" href="#"
><!--product_title_content-->Sample Product
<!--/product_title_content--></a
> </h2
><!--/product_title--><!--product_price-->
<div class="u-product-control u-product-price u-product-price-1">
<div class="u-price-wrapper u-spacing-10"
><!--product_old_price-->
<div class="u-hide-price u-old-price" style="text-decoration: line-through !important">
<!--product_old_price_content-->$12<!--/product_old_price_content--></div
><!--/product_old_price-->
<!--product_regular_price-->
<div class="u-price u-text-palette-2-base" style="font-size: 1.5rem; font-weight: 700">
<!--product_regular_price_content-->$9.95<!--/product_regular_price_content--></div
>
<!--/product_regular_price-->
</div> </div
><!--/product_price-->
<div class="u-border-3 u-border-grey-dark-1 u-line u-line-horizontal u-line-1"></div
><!--product_button-->
<!--options_json--><!--{"clickType":"add-to-cart","content":""}--><!--/options_json-->
<a
href="https://nicepage.com/c/architecture-building-website-templates"
class="u-black u-border-2 u-border-grey-75 u-btn u-button-style u-hover-grey-75 u-product-control u-btn-1"
>
<!--product_button_content-->Add to Cart<!--/product_button_content--></a
><!--/product_button-->
<!--product_button--><!--options_json--><!--{"clickType":"add-to-cart","content":"buy it now"}-->
<!--/options_json-->
<a
href="https://nicepage.com/templates"
class="u-border-2 u-border-black u-btn u-button-style u-hover-black u-none u-product-control u-text-black u-text-hover-white u-btn-2"
>
<!--product_button_content-->buy it now<!--/product_button_content--></a
><!--/product_button-->
<a
href="https://nicepage.com/joomla-templates"
class="u-btn u-button-style u-none u-text-body-color u-btn-3"
>Full Detail&nbsp;<span class="u-icon">
<svg class="u-svg-content" viewBox="0 0 512 512" x="0px" y="0px" style="width: 1em; height: 1em">
<g>
<g>
<path
d="M506.134,241.843c-0.006-0.006-0.011-0.013-0.018-0.019l-104.504-104c-7.829-7.791-20.492-7.762-28.285,0.068 c-7.792,7.829-7.762,20.492,0.067,28.284L443.558,236H20c-11.046,0-20,8.954-20,20c0,11.046,8.954,20,20,20h423.557 l-70.162,69.824c-7.829,7.792-7.859,20.455-0.067,28.284c7.793,7.831,20.457,7.858,28.285,0.068l104.504-104 c0.006-0.006,0.011-0.013,0.018-0.019C513.968,262.339,513.943,249.635,506.134,241.843z"
/>
</g>
</g>
</svg>
<img
/></span>
</a>
<div class="u-social-icons u-spacing-40 u-social-icons-1">
<a class="u-social-url" target="_blank" href=""
><span class="u-icon u-icon-circle u-social-facebook u-social-icon u-icon-2">
<svg class="u-svg-link" preserveAspectRatio="xMidYMin slice" viewBox="0 0 112 112" style="">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-bfbd" />
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
xml:space="preserve"
class="u-svg-content"
viewBox="0 0 112 112"
x="0px"
y="0px"
id="svg-bfbd"
>
<path
d="M75.5,28.8H65.4c-1.5,0-4,0.9-4,4.3v9.4h13.9l-1.5,15.8H61.4v45.1H42.8V58.3h-8.8V42.4h8.8V32.2 c0-7.4,3.4-18.8,18.8-18.8h13.8v15.4H75.5z"
/>
</svg>
</span>
</a>
<a class="u-social-url" target="_blank" href=""
><span class="u-icon u-icon-circle u-social-icon u-social-twitter u-icon-3">
<svg class="u-svg-link" preserveAspectRatio="xMidYMin slice" viewBox="0 0 112 112" style="">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-2dfc" />
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
xml:space="preserve"
class="u-svg-content"
viewBox="0 0 112 112"
x="0px"
y="0px"
id="svg-2dfc"
>
<path
d="M92.2,38.2c0,0.8,0,1.6,0,2.3c0,24.3-18.6,52.4-52.6,52.4c-10.6,0.1-20.2-2.9-28.5-8.2 c1.4,0.2,2.9,0.2,4.4,0.2c8.7,0,16.7-2.9,23-7.9c-8.1-0.2-14.9-5.5-17.3-12.8c1.1,0.2,2.4,0.2,3.4,0.2c1.6,0,3.3-0.2,4.8-0.7 c-8.4-1.6-14.9-9.2-14.9-18c0-0.2,0-0.2,0-0.2c2.5,1.4,5.4,2.2,8.4,2.3c-5-3.3-8.3-8.9-8.3-15.4c0-3.4,1-6.5,2.5-9.2 c9.1,11.1,22.7,18.5,38,19.2c-0.2-1.4-0.4-2.8-0.4-4.3c0.1-10,8.3-18.2,18.5-18.2c5.4,0,10.1,2.2,13.5,5.7c4.3-0.8,8.1-2.3,11.7-4.5 c-1.4,4.3-4.3,7.9-8.1,10.1c3.7-0.4,7.3-1.4,10.6-2.9C98.9,32.3,95.7,35.5,92.2,38.2z"
/>
</svg>
</span>
</a>
<a class="u-social-url" target="_blank" href=""
><span class="u-icon u-icon-circle u-social-icon u-social-instagram u-icon-4">
<svg class="u-svg-link" preserveAspectRatio="xMidYMin slice" viewBox="0 0 112 112" style="">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-8b43" />
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
xml:space="preserve"
class="u-svg-content"
viewBox="0 0 112 112"
x="0px"
y="0px"
id="svg-8b43"
>
<path
d="M55.9,32.9c-12.8,0-23.2,10.4-23.2,23.2s10.4,23.2,23.2,23.2s23.2-10.4,23.2-23.2S68.7,32.9,55.9,32.9z M55.9,69.4c-7.4,0-13.3-6-13.3-13.3c-0.1-7.4,6-13.3,13.3-13.3s13.3,6,13.3,13.3C69.3,63.5,63.3,69.4,55.9,69.4z"
/>
<path
d="M79.7,26.8c-3,0-5.4,2.5-5.4,5.4s2.5,5.4,5.4,5.4c3,0,5.4-2.5,5.4-5.4S82.7,26.8,79.7,26.8z"
/>
<path
d="M78.2,11H33.5C21,11,10.8,21.3,10.8,33.7v44.7c0,12.6,10.2,22.8,22.7,22.8h44.7c12.6,0,22.7-10.2,22.7-22.7 V33.7C100.8,21.1,90.6,11,78.2,11z M91,78.4c0,7.1-5.8,12.8-12.8,12.8H33.5c-7.1,0-12.8-5.8-12.8-12.8V33.7 c0-7.1,5.8-12.8,12.8-12.8h44.7c7.1,0,12.8,5.8,12.8,12.8V78.4z"
/>
</svg>
</span>
</a>
</div>
</div>
</div>
</div> </div
><!--/product_item--><!--/product-->
</div>
</section>
<section class="u-clearfix u-section-2" id="sec-ac21">
<div class="u-clearfix u-sheet u-sheet-1"></div>
</section>
<section class="u-backlink u-clearfix u-grey-80">
<a class="u-link" href="https://nicepage.com/website-templates" target="_blank">
<span>Website Templates</span>
</a>
<p class="u-text">
<span>created with</span>
</p>
<a class="u-link" href="" target="_blank"> <span>Website Builder Software</span> </a>.
</section>
</div>
</template>
<script lang="ts" setup></script>
<style scoped lang="less"></style>
<style scoped lang="less">
.u-section-1 .u-sheet-1 {
min-height: 565px;
}
.u-section-1 .u-product-1 {
min-height: 446px;
height: auto;
margin: 60px auto 60px 0;
}
.u-section-1 .u-container-layout-1 {
padding: 30px;
}
.u-section-1 .u-image-1 {
width: 540px;
height: 374px;
margin: 6px auto 0 6px;
}
.u-section-1 .u-group-1 {
width: 512px;
min-height: 376px;
height: auto;
margin: -374px 0 0 auto;
}
.u-section-1 .u-container-layout-2 {
padding: 17px 30px;
}
.u-section-1 .u-text-1 {
font-size: 2.25rem;
margin: 0 195px 0 0;
}
.u-section-1 .u-product-price-1 {
margin: 22px auto 0 0;
}
.u-section-1 .u-line-1 {
width: 100px;
height: 4px;
transform-origin: center top;
margin: 18px auto 0 0;
}
.u-section-1 .u-btn-1 {
border-style: solid;
letter-spacing: 1px;
font-weight: 700;
text-transform: uppercase;
background-image: none;
margin: 30px auto 0 0;
}
.u-section-1 .u-btn-2 {
border-style: solid;
font-weight: 700;
text-transform: uppercase;
margin: -49px 80px 0 auto;
}
.u-section-1 .u-btn-3 {
border-style: none;
font-weight: 700;
margin: 60px auto 0 0;
padding: 0;
}
.u-section-1 .u-social-icons-1 {
white-space: nowrap;
height: 24px;
min-height: 16px;
width: 151px;
min-width: 128px;
margin: 30px auto 0 0;
}
.u-section-1 .u-icon-2 {
height: 100%;
}
.u-section-1 .u-icon-3 {
height: 100%;
}
.u-section-1 .u-icon-4 {
height: 100%;
}
@media (max-width: 1199px) {
.u-section-1 .u-sheet-1 {
min-height: 556px;
}
.u-section-1 .u-product-1 {
min-height: 435px;
margin-top: 36px;
margin-bottom: 36px;
margin-right: initial;
margin-left: initial;
}
.u-section-1 .u-image-1 {
width: 428px;
height: 289px;
margin-top: 43px;
margin-left: 0;
}
.u-section-1 .u-group-1 {
width: 440px;
min-height: 366px;
margin-top: -328px;
height: auto;
}
.u-section-1 .u-container-layout-2 {
padding-top: 14px;
padding-bottom: 14px;
}
.u-section-1 .u-text-1 {
margin-right: 123px;
}
.u-section-1 .u-btn-1 {
margin-top: 26px;
}
.u-section-1 .u-btn-2 {
margin-right: 0;
padding: 10px 34px;
}
.u-section-1 .u-btn-3 {
margin-top: 45px;
}
}
@media (max-width: 991px) {
.u-section-1 .u-sheet-1 {
min-height: 954px;
}
.u-section-1 .u-product-1 {
min-height: 834px;
margin-top: 60px;
margin-bottom: 11px;
margin-right: initial;
margin-left: initial;
}
.u-section-1 .u-image-1 {
width: 620px;
height: 381px;
margin-top: 0;
margin-left: auto;
}
.u-section-1 .u-group-1 {
min-height: 371px;
margin-top: 18px;
margin-right: initial;
margin-left: initial;
width: auto;
}
.u-section-1 .u-text-1 {
margin-top: 2px;
margin-right: 20px;
}
.u-section-1 .u-btn-1 {
width: 177px;
height: 45px;
}
.u-section-1 .u-btn-2 {
margin-right: auto;
margin-left: 201px;
}
}
@media (max-width: 767px) {
.u-section-1 .u-sheet-1 {
min-height: 894px;
}
.u-section-1 .u-product-1 {
min-height: 774px;
margin-bottom: 0;
margin-right: initial;
margin-left: initial;
}
.u-section-1 .u-container-layout-1 {
padding-left: 10px;
padding-right: 10px;
}
.u-section-1 .u-image-1 {
width: 510px;
height: 311px;
}
.u-section-1 .u-group-1 {
min-height: 361px;
margin-top: 20px;
width: auto;
margin-right: initial;
margin-left: initial;
}
.u-section-1 .u-container-layout-2 {
padding-left: 0;
padding-right: 0;
}
.u-section-1 .u-btn-2 {
margin-left: 101px;
}
}
@media (max-width: 575px) {
.u-section-1 .u-sheet-1 {
min-height: 804px;
}
.u-section-1 .u-product-1 {
min-height: 684px;
margin-right: initial;
margin-left: initial;
}
.u-section-1 .u-image-1 {
width: 320px;
height: 195px;
}
.u-section-1 .u-group-1 {
min-height: 408px;
width: auto;
margin-right: initial;
margin-left: initial;
}
.u-section-1 .u-text-1 {
font-size: 1.5rem;
}
.u-section-1 .u-btn-2 {
margin-top: 22px;
margin-left: 0;
padding-right: 40px;
padding-bottom: 11px;
padding-left: 40px;
}
.u-section-1 .u-btn-3 {
margin-top: 40px;
}
}
.u-section-2 .u-sheet-1 {
min-height: 400px;
}
</style>
src/views/store/goodsList/index.vue
浏览文件 @ de86348d
<template>
<div class=""> 123</div>
<div class="u-body u-xl-mode" data-lang="en">
<section class="u-align-center u-clearfix u-section-1" id="carousel_a16f">
<div class="u-clearfix u-sheet u-sheet-1">
<h2 class="u-custom-font u-font-ubuntu u-text u-text-default u-text-1">Related Products</h2>
<div class="u-border-3 u-border-grey-dark-1 u-line u-line-horizontal u-line-1"></div>
<div class="u-expanded-width u-list u-list-1">
<div class="u-repeater u-repeater-1">
<div class="u-container-style u-hover-feature u-list-item u-repeater-item u-list-item-1">
<div class="u-container-layout u-similar-container u-valign-bottom u-container-layout-1">
<img
src="images/1712550709_2_4_16.jpg"
alt=""
class="u-expanded-width u-image u-image-default u-image-1"
data-image-width="1900"
data-image-height="2532"
/>
<h5 class="u-custom-font u-font-ubuntu u-text u-text-default u-text-2">Sample Headline</h5>
<h3 class="u-custom-font u-font-ubuntu u-text u-text-default u-text-3">$ 90</h3>
</div>
</div>
<div class="u-container-style u-hover-feature u-list-item u-repeater-item u-list-item-2">
<div class="u-container-layout u-similar-container u-valign-bottom u-container-layout-2">
<img
src="images/6903603702_1_1_16.jpg"
alt=""
class="u-expanded-width u-image u-image-default u-image-2"
/>
<h5 class="u-custom-font u-font-ubuntu u-text u-text-default u-text-4">Sample Headline</h5>
<h3 class="u-custom-font u-font-ubuntu u-text u-text-default u-text-5">$ 200</h3>
</div>
</div>
<div class="u-container-style u-hover-feature u-list-item u-repeater-item u-list-item-3">
<div class="u-container-layout u-similar-container u-valign-bottom u-container-layout-3">
<img
src="images/1760550700_2_1_16.jpg"
alt=""
class="u-expanded-width u-image u-image-default u-image-3"
/>
<h5 class="u-custom-font u-font-ubuntu u-text u-text-default u-text-6">Sample Headline</h5>
<h3 class="u-custom-font u-font-ubuntu u-text u-text-default u-text-7">$ 90</h3>
</div>
</div>
<div class="u-container-style u-hover-feature u-list-item u-repeater-item u-list-item-4">
<div class="u-container-layout u-similar-container u-valign-bottom u-container-layout-4">
<img
src="images/6921619700_1_1_16.jpg"
alt=""
class="u-expanded-width u-image u-image-default u-image-4"
/>
<h5 class="u-custom-font u-font-ubuntu u-text u-text-default u-text-8">Sample Headline</h5>
<h3 class="u-custom-font u-font-ubuntu u-text u-text-default u-text-9">$ 250</h3>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="u-clearfix u-section-2" id="sec-ac21">
<div class="u-clearfix u-sheet u-sheet-1"></div>
</section>
<section class="u-backlink u-clearfix u-grey-80">
<a class="u-link" href="https://nicepage.com/css-templates" target="_blank">
<span>Free CSS Templates</span>
</a>
<p class="u-text">
<span>created with</span>
</p>
<a class="u-link" href="https://nicepage.site" target="_blank"> <span>Best Website Builder</span> </a>.
</section>
</div>
</template>
<script lang="ts">
import { ref } from 'vue';
</script>
<script lang="ts"></script>
<style lang="less" scoped>
.u-section-1 .u-sheet-1 {
min-height: 501px;
}
.u-section-1 .u-text-1 {
font-weight: 700;
font-size: 1.875rem;
margin: 60px auto 0;
}
.u-section-1 .u-line-1 {
width: 100px;
height: 3px;
margin: 30px auto 0 520px;
}
.u-section-1 .u-list-1 {
height: auto;
margin: 30px auto 60px 0;
}
.u-section-1 .u-repeater-1 {
grid-template-columns: calc(25% - 7.5px) calc(25% - 7.5px) calc(25% - 7.5px) calc(25% - 7.5px);
grid-gap: 10px 10px;
min-height: 375px;
}
.u-section-1 .u-list-item-1 {
transition-duration: 0.5s;
transform: translateX(0px) translateY(0px) scale(1) rotate(0deg);
}
.u-section-1 .u-container-layout-1 {
padding: 10px;
}
.u-section-1 .u-image-1 {
height: 275px;
margin: 0 auto 0 0;
}
.u-section-1 .u-text-2 {
margin-left: 0;
margin-bottom: 0;
margin-top: 20px;
}
.u-section-1 .u-text-3 {
font-weight: 700;
margin: 20px auto 0 0;
}
.u-section-1 .u-list-item-2 {
transition-duration: 0.5s;
transform: translateX(0px) translateY(0px) scale(1) rotate(0deg);
}
.u-section-1 .u-container-layout-2 {
padding: 10px;
}
.u-section-1 .u-image-2 {
height: 275px;
margin: 0 auto 0 0;
}
.u-section-1 .u-text-4 {
margin-left: 0;
margin-bottom: 0;
margin-top: 20px;
}
.u-section-1 .u-text-5 {
font-weight: 700;
margin: 20px auto 0 0;
}
.u-section-1 .u-list-item-3 {
transition-duration: 0.5s;
transform: translateX(0px) translateY(0px) scale(1) rotate(0deg);
}
.u-section-1 .u-container-layout-3 {
padding: 10px;
}
.u-section-1 .u-image-3 {
height: 275px;
margin: 0 auto 0 0;
}
.u-section-1 .u-text-6 {
margin-left: 0;
margin-bottom: 0;
margin-top: 20px;
}
.u-section-1 .u-text-7 {
font-weight: 700;
margin: 20px auto 0 0;
}
.u-section-1 .u-list-item-4 {
transition-duration: 0.5s;
transform: translateX(0px) translateY(0px) scale(1) rotate(0deg);
}
.u-section-1 .u-container-layout-4 {
padding: 10px;
}
.u-section-1 .u-image-4 {
height: 275px;
margin: 0 auto 0 0;
}
.u-section-1 .u-text-8 {
margin-left: 0;
margin-bottom: 0;
margin-top: 20px;
}
.u-section-1 .u-text-9 {
font-weight: 700;
margin: 20px auto 0 0;
}
@media (max-width: 1199px) {
.u-section-1 .u-sheet-1 {
min-height: 435px;
}
.u-section-1 .u-list-1 {
margin-right: initial;
margin-left: initial;
}
.u-section-1 .u-image-1 {
height: 223px;
margin-right: initial;
margin-left: initial;
}
.u-section-1 .u-image-2 {
height: 223px;
margin-right: initial;
margin-left: initial;
}
.u-section-1 .u-image-3 {
height: 223px;
margin-right: initial;
margin-left: initial;
}
.u-section-1 .u-image-4 {
height: 223px;
margin-right: initial;
margin-left: initial;
}
}
@media (max-width: 991px) {
.u-section-1 .u-sheet-1 {
min-height: 1073px;
}
.u-section-1 .u-line-1 {
margin-left: auto;
}
.u-section-1 .u-repeater-1 {
grid-template-columns: calc(50% - 5px) calc(50% - 5px);
}
.u-section-1 .u-image-1 {
height: 353px;
margin-right: initial;
margin-left: initial;
}
.u-section-1 .u-image-2 {
height: 353px;
margin-right: initial;
margin-left: initial;
}
.u-section-1 .u-image-3 {
height: 353px;
margin-right: initial;
margin-left: initial;
}
.u-section-1 .u-image-4 {
height: 353px;
margin-right: initial;
margin-left: initial;
}
}
@media (max-width: 767px) {
.u-section-1 .u-repeater-1 {
grid-template-columns: 100%;
}
.u-section-1 .u-image-1 {
height: 540px;
margin-right: initial;
margin-left: initial;
}
.u-section-1 .u-image-2 {
height: 540px;
margin-right: initial;
margin-left: initial;
}
.u-section-1 .u-image-3 {
height: 540px;
margin-right: initial;
margin-left: initial;
}
.u-section-1 .u-image-4 {
height: 540px;
margin-right: initial;
margin-left: initial;
}
}
@media (max-width: 575px) {
.u-section-1 .u-text-1 {
font-size: 1.5rem;
}
.u-section-1 .u-image-1 {
height: 332px;
margin-right: initial;
margin-left: initial;
}
.u-section-1 .u-image-2 {
height: 332px;
margin-right: initial;
margin-left: initial;
}
.u-section-1 .u-image-3 {
height: 332px;
margin-right: initial;
margin-left: initial;
}
.u-section-1 .u-image-4 {
height: 332px;
margin-right: initial;
margin-left: initial;
}
}
.u-section-1 .u-list-item-4,
.u-section-1 .u-list-item-4:before,
.u-section-1 .u-list-item-4 > .u-container-layout:before {
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width,
border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow,
opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing,
transform, background-image, image-zoom, background-size, background-position;
}
.u-section-1 .u-list-item-4.u-list-item-4.u-list-item-4:hover {
transform: scale(1.1) translateX(0px) translateY(0px) !important;
}
.u-section-1 .u-list-item-4.u-list-item-4.u-list-item-4.hover {
transform: scale(1.1) translateX(0px) translateY(0px) !important;
}
.u-section-1 .u-container-layout:hover .u-list-item-4 {
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px) !important;
}
.u-container-layout.hover .u-section-1 .u-list-item-4 {
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px) !important;
}
.u-section-1 .u-list-item-1,
.u-section-1 .u-list-item-1:before,
.u-section-1 .u-list-item-1 > .u-container-layout:before {
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width,
border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow,
opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing,
transform, background-image, image-zoom, background-size, background-position;
}
.u-section-1 .u-list-item-1.u-list-item-1.u-list-item-1:hover {
transform: scale(1.1) translateX(0px) translateY(0px) !important;
}
.u-section-1 .u-list-item-1.u-list-item-1.u-list-item-1.hover {
transform: scale(1.1) translateX(0px) translateY(0px) !important;
}
.u-section-1 .u-container-layout:hover .u-list-item-1 {
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px) !important;
}
.u-container-layout.hover .u-section-1 .u-list-item-1 {
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px) !important;
}
.u-section-1 .u-list-item-2,
.u-section-1 .u-list-item-2:before,
.u-section-1 .u-list-item-2 > .u-container-layout:before {
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width,
border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow,
opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing,
transform, background-image, image-zoom, background-size, background-position;
}
.u-section-1 .u-list-item-2.u-list-item-2.u-list-item-2:hover {
transform: scale(1.1) translateX(0px) translateY(0px) !important;
}
.u-section-1 .u-list-item-2.u-list-item-2.u-list-item-2.hover {
transform: scale(1.1) translateX(0px) translateY(0px) !important;
}
.u-section-1 .u-container-layout:hover .u-list-item-2 {
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px) !important;
}
.u-container-layout.hover .u-section-1 .u-list-item-2 {
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px) !important;
}
.u-section-1 .u-list-item-3,
.u-section-1 .u-list-item-3:before,
.u-section-1 .u-list-item-3 > .u-container-layout:before {
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width,
border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow,
opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing,
transform, background-image, image-zoom, background-size, background-position;
}
.u-section-1 .u-list-item-3.u-list-item-3.u-list-item-3:hover {
transform: scale(1.1) translateX(0px) translateY(0px) !important;
}
.u-section-1 .u-list-item-3.u-list-item-3.u-list-item-3.hover {
transform: scale(1.1) translateX(0px) translateY(0px) !important;
}
.u-section-1 .u-container-layout:hover .u-list-item-3 {
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px) !important;
}
.u-container-layout.hover .u-section-1 .u-list-item-3 {
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px) !important;
}
<style lang="less" scoped></style>
.u-section-2 .u-sheet-1 {
min-height: 400px;
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论