上传文件至 src/components
This commit is contained in:
140
src/components/Carousel.vue
Normal file
140
src/components/Carousel.vue
Normal file
@@ -0,0 +1,140 @@
|
|||||||
|
<template>
|
||||||
|
<!-- html -->
|
||||||
|
<div>
|
||||||
|
<div class="carousel-box">
|
||||||
|
<el-carousel height="auto" trigger="click">
|
||||||
|
<el-carousel-item class="boxCarousel" v-for="(item, index) in list" :key="index">
|
||||||
|
<div class="relative" style="height: 100%">
|
||||||
|
<el-image :src="item.url" style="height: 100%"></el-image>
|
||||||
|
<div class="absolute absolutetxt">
|
||||||
|
<div class="f-35 carousel-name">{{$t(item.name)}}</div>
|
||||||
|
<div class="f-16 carousel-title">{{$t(item.title)}}</div>
|
||||||
|
<div class="f-20 header-btn" @click="itemClick(item)">{{$t(`carousel.text`+index)}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-carousel-item>
|
||||||
|
</el-carousel>
|
||||||
|
<div class="scanWin">
|
||||||
|
<div class="flex-display flex-space-around">
|
||||||
|
<div class="flex-display flex-column">
|
||||||
|
<img style="width: 100px;height: 100px;" src="../assets/images/thDownload.png" />
|
||||||
|
<div class="item-content">{{$t("app.download")}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-display flex-column" style="margin-left: 30px;">
|
||||||
|
<img style="width: 100px;height: 100px;" src="../assets/images/follow.png" />
|
||||||
|
<div class="item-content">{{$t("follow.us")}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-display" style="border-top: 1px solid #ababab;margin-top: 10px;padding-top: 10px;">
|
||||||
|
<div style="margin: 10px;">
|
||||||
|
<img style="width: 35px;height: 35px;" src="../assets/images/phone.png" />
|
||||||
|
</div>
|
||||||
|
<div style="color: #666;font-size: 14px;">
|
||||||
|
<div>
|
||||||
|
<span>{{$t("customer.service")}}：</span>
|
||||||
|
<span>+66 888000282</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>{{$t("labour")}}：</span>
|
||||||
|
<span>9:30—18:00</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-dialog width="500px" v-model="dialogVisible">
|
||||||
|
<div class="flex-display flex-column" style="color: black;padding-bottom: 50px;">
|
||||||
|
<div class="f-30" style="font-weight: 600;padding: 20px 0;">{{$t("octopContact")}}</div>
|
||||||
|
<div>
|
||||||
|
<img style="width: 250px;height: 250px;" src="../assets/images/line.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="f-20" style="font-weight: 600;">{{$t("octopContact.subtitle")}}</div>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup name="Carousel">
|
||||||
|
import Contact from './Contact.vue'
|
||||||
|
import { ref } from 'vue'
|
||||||
|
const list = ref([
|
||||||
|
{
|
||||||
|
name: "carousel.name0",
|
||||||
|
title: 'carousel.title0',
|
||||||
|
url: new URL(`@/assets/images/1.png`, import.meta.url).href,
|
||||||
|
link: '',
|
||||||
|
btn_text: 'carousel.text0',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "carousel.name1",
|
||||||
|
title: 'carousel.title1',
|
||||||
|
url: new URL(`@/assets/images/2.png`, import.meta.url).href,
|
||||||
|
link: '',
|
||||||
|
btn_text: 'carousel.text1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "carousel.name2",
|
||||||
|
title: 'carousel.title2',
|
||||||
|
url: new URL(`@/assets/images/3.png`, import.meta.url).href,
|
||||||
|
link: '',
|
||||||
|
btn_text: 'carousel.text2',
|
||||||
|
}
|
||||||
|
])
|
||||||
|
const dialogVisible = ref(false)
|
||||||
|
const itemClick = (item : object) => {
|
||||||
|
dialogVisible.value = true
|
||||||
|
console.log(item)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.carousel-box {
|
||||||
|
width: 1440px;
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
.boxCarousel {
|
||||||
|
height: 423px;
|
||||||
|
|
||||||
|
.absolutetxt {
|
||||||
|
left: 160px;
|
||||||
|
bottom: 130px;
|
||||||
|
.carousel-name {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
line-height: 49px;
|
||||||
|
}
|
||||||
|
.carousel-title {
|
||||||
|
max-width: 700px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #666;
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
.header-btn {
|
||||||
|
font-weight: 400;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 30px;
|
||||||
|
padding: 10px 60px;
|
||||||
|
background-color: #ed0000;
|
||||||
|
border-radius: 6px;
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 24px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.scanWin{
|
||||||
|
position: absolute;
|
||||||
|
right: -100px;
|
||||||
|
top: 30px;
|
||||||
|
z-index: 10;
|
||||||
|
background-color: #fff;
|
||||||
|
padding:10px 30px;
|
||||||
|
.item-content{
|
||||||
|
font-size: 14px;
|
||||||
|
color: #ed0000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
157
src/components/ConsumerBusiness.vue
Normal file
157
src/components/ConsumerBusiness.vue
Normal file
@@ -0,0 +1,157 @@
|
|||||||
|
<template>
|
||||||
|
<div style="background-color: #fff;padding-bottom: 70px;" class="flex-display flex-column">
|
||||||
|
<div style="margin: 50px 0 30px;" class="flex-display flex-column">
|
||||||
|
<div class="font-medium f-30 bold">{{$t("business.title")}}</div>
|
||||||
|
<hr style="background-color: #ef983b;width: 60px;margin: 10px;">
|
||||||
|
<div style="color: #666;" class="f-18">{{$t("business.text")}}</div>
|
||||||
|
</div>
|
||||||
|
<div style="width: 1050px;" class="flex-display flex-column">
|
||||||
|
<div class="flex-display flex-center">
|
||||||
|
<div style="margin: 10px;" v-for="(item, index) in list" :key="index">
|
||||||
|
<div class="backgroundSize" :style="{width:item.children?'287px':'173px',height: '340px','background-image': !item.children ? 'url('+getImageUrl(index+1)+')' : 'none',}">
|
||||||
|
<div style="padding: 30px 0 10px;" class="consumption-item-title" v-if="item.name">{{$t(item.name)}}</div>
|
||||||
|
<div class="consumption-item-btn" v-if="item.btn_text">{{$t(item.btn_text)}}</div>
|
||||||
|
<div v-if="item?.children" style="height: 100%;" class="flex-display flex-column flex-space-between">
|
||||||
|
<div style="width: 100%;overflow: hidden;" v-for="(el, i) in item.children" :key="i">
|
||||||
|
<div style="height: 160px;" class="backgroundSize" :style="{ 'background-image': 'url('+getImageUrl2(index,i)+')' }">
|
||||||
|
<div style="margin-right: 130px;">
|
||||||
|
<div style="padding: 30px 0 10px;" class="consumption-item-title">{{ $t(el.name) }}</div>
|
||||||
|
<div class="consumption-item-btn">{{$t(el.btn_text)}}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer">
|
||||||
|
{{$t("business.footer.title")}}
|
||||||
|
</div>
|
||||||
|
<div class="footer-info">
|
||||||
|
{{$t("business.footer.txt")}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup name="ConsumerBusiness">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
const list = ref([
|
||||||
|
{
|
||||||
|
name: "business.arr.name0",
|
||||||
|
btn_text:"business.arr.btn"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "",
|
||||||
|
btn_text: '',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
name: "business.arr2.name0",
|
||||||
|
btn_text: 'business.arr.btn',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "business.arr2.name1",
|
||||||
|
btn_text: 'business.arr.btn',
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "business.arr.name1",
|
||||||
|
btn_text: 'business.arr.btn',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "business.arr.name2",
|
||||||
|
btn_text: 'business.arr.btn',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "business.arr.name3",
|
||||||
|
btn_text: 'business.arr.btn',
|
||||||
|
}
|
||||||
|
]
|
||||||
|
)
|
||||||
|
function getImageUrl(name:number) {
|
||||||
|
return new URL(`../assets/images/0${name}.png`, import.meta.url).href
|
||||||
|
}
|
||||||
|
function getImageUrl2(name:number,i:number) {
|
||||||
|
return new URL(`../assets/images/${name}_${i + 1}.png`, import.meta.url).href
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.backgroundSize{
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.consumption-item-title {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #333;
|
||||||
|
display: inline-block;
|
||||||
|
max-height: 80px;
|
||||||
|
text-align: center;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
/* 限制为两行 */
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
/* 隐藏超出部分 */
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
/* 超出部分用省略号表示 */
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.consumption-item-btn {
|
||||||
|
padding: 7px 0;
|
||||||
|
border-radius: 19px;
|
||||||
|
border: 1px solid #333;
|
||||||
|
cursor: pointer;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 12px;
|
||||||
|
width: 110px;
|
||||||
|
color: #333;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #666;
|
||||||
|
line-height: 25px;
|
||||||
|
margin-top: 33px;
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
display: inline-flex;
|
||||||
|
content: "";
|
||||||
|
height: 1px;
|
||||||
|
width: 106px;
|
||||||
|
background: #979797;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-right: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
display: inline-flex;
|
||||||
|
content: "";
|
||||||
|
height: 1px;
|
||||||
|
width: 106px;
|
||||||
|
background: #979797;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-left: 80px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-info {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
line-height: 19px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
106
src/components/Contact.vue
Normal file
106
src/components/Contact.vue
Normal file
@@ -0,0 +1,106 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="relative w-[100%] h-[410px] mx-auto my-0 mt-[57px] rounded-[8px] bg-[url('@/assets/images/contact.png')] bg-[length:100%_100%]">
|
||||||
|
<div class="absolute w-[164px] top-[65px] left-[350px] text-start">
|
||||||
|
<div class="font-medium text-[18px] leading-[24px] text-[#111]">提交步骤</div>
|
||||||
|
<div class="font-normal text-[16px] leading-[22px] text-[#393939]">拨打咨询电话，立即 领取开店大礼包</div>
|
||||||
|
</div>
|
||||||
|
<div class="absolute left-[100px] bottom-[20px]" style="display: flex;align-items: center;">
|
||||||
|
<div
|
||||||
|
class="inline-block w-[20px] h-[20px] mr-[8px] bg-[url('@/assets/images/mobile.png')] bg-[length:100%_100%]"></div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="font-normal text-[16px] text-[#000]">
|
||||||
|
Thalland +66 0931113038
|
||||||
|
</div>
|
||||||
|
<div class="font-normal text-[16px] text-[#000]">
|
||||||
|
Chinea +86 18957129897
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="font-normal text-[16px] text-[#000] leading-[28px] mx-[8px]">9:30 - 18:00</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-[255px] mr-[147px] float-right">
|
||||||
|
<div class="my-[30px] text-[21px] font-medium leading-[30px] text-[#232323] text-start">立即预约</div>
|
||||||
|
<el-form ref="form" :model="form" label-width="0px">
|
||||||
|
<el-form-item>
|
||||||
|
<el-input placeholder="请输入您的姓名" v-model="form.name"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-input placeholder="请输入企业名称" v-model="form.name"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-input placeholder="请输入手机号" v-model="form.name"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-input placeholder="请输入意向类目，如：手机" v-model="form.name"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button class="submit" type="primary" @click="onSubmit">提交信息</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup name="Contact">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
const form = ref({
|
||||||
|
name:''
|
||||||
|
})
|
||||||
|
const list = ref([
|
||||||
|
{
|
||||||
|
title: "免押风控",
|
||||||
|
content: '接入支付宝信用支付体系，为用户减免押金的同时解决商户的发货信任问题。结合章鱼自研红盾风控，提供超1000条风控信息及AI人工建议，快速甄别用户资质，把控风险，稳健经营。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "司法仲裁",
|
||||||
|
content: '与仲裁委系统级对接，案件证据一键提交审理，从提交至判决低至一个月时间内;同时可采用法院强制执行，失信人等多维司法途径保障资产安全。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "区块链及保险",
|
||||||
|
content: '永久存证，不可篡改；可购买人保，财产损失后保险赔偿。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "锁机",
|
||||||
|
content: '章鱼推出的苹果锁机服务，贴合商家痛点，针对性地解决手机租赁逾期坏账问题。'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
)
|
||||||
|
const onSubmit = () => {
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.title {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #333;
|
||||||
|
line-height: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
line-height: 21px;
|
||||||
|
margin-top: 14px;
|
||||||
|
height: 105px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-button.submit) {
|
||||||
|
background-color: #ed0000;
|
||||||
|
border-color: #ed0000;
|
||||||
|
line-height: 27px;
|
||||||
|
padding: 12px 24px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-input__inner) {
|
||||||
|
border-color: #2c1717;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
45
src/components/Content.vue
Normal file
45
src/components/Content.vue
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
<template>
|
||||||
|
<div class="common-layout">
|
||||||
|
<el-container>
|
||||||
|
<el-header class="headerCss">
|
||||||
|
<NavContainer></NavContainer>
|
||||||
|
</el-header>
|
||||||
|
<el-main style="padding: 0;" :style="{ zoom: scaleva }">
|
||||||
|
<RouterView></RouterView>
|
||||||
|
</el-main>
|
||||||
|
<el-footer style="padding: 0;">
|
||||||
|
<Footer></Footer>
|
||||||
|
</el-footer>
|
||||||
|
</el-container>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup name="Content">
|
||||||
|
import NavContainer from './NavContainer.vue'
|
||||||
|
import Footer from './Footer.vue'
|
||||||
|
import { RouterView } from 'vue-router'
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
const scaleva = ref()
|
||||||
|
const bodyScale = () => {
|
||||||
|
const devicewidth = document.documentElement.clientWidth// 获取当前分辨率下的可是区域宽度
|
||||||
|
const scale = devicewidth / 1920 // 分母——设计稿的尺寸
|
||||||
|
scaleva.value = scale
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
bodyScale()
|
||||||
|
window.onresize = () => {
|
||||||
|
return (() => {
|
||||||
|
bodyScale()
|
||||||
|
})()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.headerCss {
|
||||||
|
background-color: $title-background-color;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
110
src/components/CoreProduct.vue
Normal file
110
src/components/CoreProduct.vue
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
<template>
|
||||||
|
<div class="flex-display flex-column">
|
||||||
|
<div style="margin: 50px;" class="text-center f-30 bold">{{$t("coreProduct.title")}}</div>
|
||||||
|
<div :style="{
|
||||||
|
width: '1050px',
|
||||||
|
height: '335px',
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
padding: '30px',
|
||||||
|
backgroundImage:'url('+getImageUrl()+')',
|
||||||
|
backgroundRepeat:'no-repeat',
|
||||||
|
backgroundPosition: 'right 250px center'
|
||||||
|
|
||||||
|
}">
|
||||||
|
<ul class="product-contents">
|
||||||
|
<li>
|
||||||
|
<div class="orangeCircle"></div> {{$t("coreProduct.li1")}}
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="orangeCircle"></div> {{$t("coreProduct.li2")}}
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="orangeCircle"></div> {{$t("coreProduct.li3")}}
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="orangeCircle"></div> {{$t("coreProduct.li4")}}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div style="margin-top: 28px;">
|
||||||
|
<el-button class="submit" type="primary" @click="itemClick()">{{$t("coreProduct.but")}}</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-dialog width="500px" v-model="dialogVisible">
|
||||||
|
<div class="flex-display flex-column" style="color: black;padding-bottom: 50px;">
|
||||||
|
<div class="f-30" style="font-weight: 600;padding: 20px 0 0;">{{$t("octopContact")}}</div>
|
||||||
|
<div>
|
||||||
|
<img style="width: 250px;height: 250px;" src="../assets/images/line.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="f-20" style="font-weight: 600;">{{$t("octopContact.subtitle")}}</div>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup name="CoreProduct">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import store from '../assets/images/store.png'
|
||||||
|
const dialogVisible = ref(false)
|
||||||
|
const form = ref({
|
||||||
|
|
||||||
|
})
|
||||||
|
function getImageUrl() {
|
||||||
|
return new URL(`../assets/images/store.png`, import.meta.url).href
|
||||||
|
}
|
||||||
|
|
||||||
|
const itemClick = () => {
|
||||||
|
dialogVisible.value = true
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.title {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #333;
|
||||||
|
line-height: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
line-height: 21px;
|
||||||
|
margin-top: 14px;
|
||||||
|
height: 105px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-contents {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style-type: none;
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-top: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999;
|
||||||
|
line-height: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
grid-column-gap: 8px;
|
||||||
|
-webkit-column-gap: 8px;
|
||||||
|
column-gap: 8px;
|
||||||
|
|
||||||
|
.orangeCircle {
|
||||||
|
display: inline-block;
|
||||||
|
width: 3px;
|
||||||
|
height: 3px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit {
|
||||||
|
background-color: #ed0000;
|
||||||
|
border-color: #ed0000;
|
||||||
|
display: inline-block;
|
||||||
|
font-weight: 400;
|
||||||
|
height: 40px;
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user