提交代码
This commit is contained in:
yiqiuyang
0
src/views/edit/index.vue
Normal file
0
src/views/edit/index.vue
Normal file
@ -10,7 +10,7 @@ onMounted(() => {})
|
||||
<div class="page">
|
||||
<div class="banner">
|
||||
<video autoplay muted loop>
|
||||
<source src="/static/images/main/display.mp4" type="video/mp4">
|
||||
<source src="/static/images/main/display.mp4" type="video/mp4" />
|
||||
</video>
|
||||
<div class="banner-link"><span>进入演示系统</span></div>
|
||||
</div>
|
||||
@ -38,7 +38,7 @@ onMounted(() => {})
|
||||
.page {
|
||||
.banner {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background-color: #333333;
|
||||
&-link {
|
||||
@ -65,10 +65,10 @@ onMounted(() => {})
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
video{
|
||||
video {
|
||||
padding: 3px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,7 +11,7 @@ onMounted(() => {})
|
||||
</div>
|
||||
<div class="QR-dev">
|
||||
<img class="QR-img" :src="`./static/images/footer/mark.png`" alt="" />
|
||||
<div class="label">熊雨翔</div>
|
||||
<div class="label">市场联系人</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -20,9 +20,9 @@ onMounted(() => {})
|
||||
.QR-code {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
.QR-dev {
|
||||
width: 150px;
|
||||
height: 200px;
|
||||
|
||||
@ -9,7 +9,7 @@ const {navIndex} = storeToRefs(navStore)
|
||||
|
||||
// 响应式数据
|
||||
const navList = ref([])
|
||||
const activeIndex = ref(null)
|
||||
const activeIndex = ref('/')
|
||||
|
||||
// 处理导航选择
|
||||
const handleSelect = (key) => {
|
||||
|
||||
@ -5,9 +5,7 @@ import {useRoute, useRouter} from 'vue-router'
|
||||
import {newsDetail} from './mock'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
const detail = route.query
|
||||
|
||||
detail.artical = newsDetail.find((item) => item.id == route.query.id).article
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
63
src/views/product/description.js
Normal file
63
src/views/product/description.js
Normal file
@ -0,0 +1,63 @@
|
||||
export const advantages = `
|
||||
<div>★ 提供业界领先的性价比解决方案。</div>
|
||||
<div>★ 内置4G全网通，无需外接网络，即装即用。</div>
|
||||
<div>★ 宽电压输入，轻松应对电压不稳等复杂情况。</div>
|
||||
<div>★ 超低功耗设计，极大节约长期用电与运维成本。</div>
|
||||
<div>★ 极致轻量，极大拓宽了安装位置与应用场景。</div>
|
||||
<div>★ 灵活可调的侦测模式，满足从安防到巡检的全场景需求。</div>
|
||||
<div>★ 具备升级能力，当前投资可平滑演进至更高专业层级。</div>
|
||||
`
|
||||
|
||||
export const monitorSystemList = [
|
||||
{
|
||||
id: 1,
|
||||
description: `
|
||||
<div class="monitor">RGRID-Lite 是一款专为国标无人机远程识别设计的地面监测设备。它能够精准获取低空目标区域内无人机的实时位置、飞手位置、唯一SN识别码等关键信息，并动态显示与记录无人机及飞手的移动轨迹。所有数据实时上传至后台系统，支持长期存储与便捷回溯，为空域监管提供完整的数据支撑。</div>
|
||||
<div class="monitor">设备采用轻量化与一体化设计，部署灵活，可快速适配多种复杂安装环境。凭借超低功耗特性，可搭配UPS不间断电源或太阳能供电系统，实现长时间稳定运行。同时，内置4G全网通模块，无需依赖外部网络，彻底解决供电与传输难题。</div>
|
||||
<div class="monitor">RGRID-Lite 在具备卓越性能的同时，展现出优异的性价比，广泛适用于各类低空监管场景。设备支持功能定制与二次开发，可根据用户需求灵活扩展，是构建低成本、高效率无人机监管体系的理想之选。</div>
|
||||
`,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
description: `
|
||||
<div class="monitor">RGRID-Ped 是一款遵循国标GB42590-2023的便携式无人机远程识别模块。它能够精准监测并获取目标空域内无人机的多项关键数据，包括实时位置、飞手位置、唯一SN识别码、飞行型号、航速与高度等，并实时推送至用户平台。</div>
|
||||
<div class="monitor">该模块采用高度集成化设计，体积小巧、功耗极低，具备完善的接口与通信协议，可快速适配并嵌入各类无人机反制、监管或作业设备中，轻松应对有限的内部空间要求。同时，模块支持全方位的二次开发与功能定制，为各类集成应用提供可靠、灵活的低空感知核心。</div>
|
||||
`,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
description: `
|
||||
<div class="monitor">RGRID-Mob 是一款符合国标 GB42590-2023 的便携式无人机远程识别设备，专为机动巡检与快速部署场景设计。它可精准监测目标空域内无人机的实时位置、飞手位置、唯一SN识别码等关键信息，并实时显示与记录无人机与飞手的动态轨迹。所有数据同步上传至后台，支持长期存储与灵活调阅，为空域执法与现场处置提供完整信息支撑。</div>
|
||||
<div class="monitor">设备支持多终端协同管理，用户可通过移动端小程序实时查看数据，指挥中心亦能通过大屏系统统览全局。系统具备分级权限管理功能，支持多级账户与设备组网，实现权限分离与协同指挥。手机端集成一键导航功能，可快速定位飞手位置；指挥平台则全面监管辖区内所有设备状态与每架被侦测无人机的详细数据，真正实现“前端机动侦测—后端统一指挥”的一体化管控闭环。</div>
|
||||
<div class="monitor">RGRID-Mob 重量轻、体积小，可随身挂载，便于野外作业与快速机动。内置4G数据传输模块，开机即用，无需复杂配对，极大提升部署效率与操作便捷性，是应对突发低空监管任务的理想移动侦测终端。</div>
|
||||
`,
|
||||
},
|
||||
]
|
||||
|
||||
export const remoteDeviceList = [
|
||||
{
|
||||
id: 1,
|
||||
description: `<div>多模态数据融合：直面不同侦测设备的数据壁垒，凭借自研融合算法，呈现深度可靠的全局态势。</div>
|
||||
<div>体系化平台搭配：作为中枢神经，无缝对接与总览旗下各类专业平台，奠定一站式服务基石。</div>`,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
description: ` <div>大量设备接入经验：具备广泛的设备兼容性，确保监管网络覆盖无死角。</div>
|
||||
<div>SAAS化架构：支持多租户权限管理，满足不同区域、不同层级管理单位的独立运营与协同监管需求。</div>`,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
description: `<div>大量行业内接入经验：预集成了众多厂商设备接口，极大降低了系统集成难度与成本，体现了卓越的性价比。</div>
|
||||
<div>体系化平台搭配：与监管平台无缝联动，接收预警并执行指令，形成“侦-识-控”一体的完整闭环。</div>`,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
description: `<div>多模态数据融合：将飞行数据、视频流与AI识别结果深度融合，输出可直接应用的业务洞察。</div>
|
||||
<div>SAAS化架构：支持多团队、多项目并行作业与数据隔离，轻松管理大规模机队。</div>`,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
description: ` <div>体系化平台搭配：与真实监管平台联动，是“一站式服务”中用于模拟、预测与优化的关键一环。</div>
|
||||
<div>多模态数据融合：将真实地理信息、仿真数据与实时监管流融合，在虚拟空间中复现最真实的低空场景。</div>`,
|
||||
},
|
||||
]
|
||||
98
src/views/product/detail.vue
Normal file
98
src/views/product/detail.vue
Normal file
@ -0,0 +1,98 @@
|
||||
<script setup>
|
||||
import {ref, onMounted, computed} from 'vue'
|
||||
import {useRoute, useRouter} from 'vue-router'
|
||||
import {advantages, monitorSystemList, remoteDeviceList} from './description.js'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const detail = route.query
|
||||
|
||||
const showMonitor = computed(() => detail.type === 'monitorSystem')
|
||||
|
||||
onMounted(() => {})
|
||||
|
||||
const toBack = () => {
|
||||
router.back()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page flex column a-c">
|
||||
<div class="label">{{ detail.title }} {{ detail.subTitle }}</div>
|
||||
<div class="content flex j-s">
|
||||
<div class="img">
|
||||
<img :src="`./static/images/${detail.imgUrl}`" alt="" />
|
||||
</div>
|
||||
|
||||
<!-- 核心优势 -->
|
||||
<div class="text" v-if="showMonitor">
|
||||
<div class="title">核心优势：</div>
|
||||
<div v-html="advantages"></div>
|
||||
</div>
|
||||
<div class="text" v-if="!showMonitor">
|
||||
<div v-html="remoteDeviceList[detail.id - 1].description"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 介绍 -->
|
||||
<div class="descripition" v-if="showMonitor">
|
||||
<div v-html="monitorSystemList[detail.id - 1].description"></div>
|
||||
</div>
|
||||
<div class="back" @click="toBack">返回</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.monitor) {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin: 64px 0 20px 0;
|
||||
font-family: 'PingFang SC';
|
||||
font-weight: 500;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: $black;
|
||||
}
|
||||
.time {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.content {
|
||||
width: 1300px;
|
||||
height: 550px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
.img {
|
||||
img {
|
||||
width: 550px;
|
||||
height: 550px;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
font-size: 24px;
|
||||
line-height: 5ex;
|
||||
.title {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.descripition {
|
||||
width: 1000px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.back {
|
||||
padding: 10px 40px;
|
||||
background: #0389ff;
|
||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 16px;
|
||||
margin-bottom: 60px;
|
||||
font-size: 20px;
|
||||
color: $white;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@ -1,11 +1,43 @@
|
||||
<script setup>
|
||||
import {ref, onMounted} from 'vue'
|
||||
import {ref, onMounted, computed} from 'vue'
|
||||
import Swiper from '@/components/Swiper/index.vue'
|
||||
import Banner from '@/components/Banner/index.vue'
|
||||
import Project from './project.vue'
|
||||
|
||||
import {findLabelByUrl} from '@/utils'
|
||||
|
||||
import {useNavStore} from '@/store/nav'
|
||||
const navStore = useNavStore()
|
||||
|
||||
import {useRouter} from 'vue-router'
|
||||
const router = useRouter()
|
||||
|
||||
const title = computed(() => findLabelByUrl(window.nav.header, navStore.navIndex))
|
||||
|
||||
onMounted(() => {})
|
||||
|
||||
const currentPage = ref(1)
|
||||
|
||||
onMounted(() => {})
|
||||
const swiperItem = ref([
|
||||
{id: 1, title: 'RGRID-Lite', subTitle: '无人机Remote ID远程识别设备', imgUrl: 'product/detail/6.png'},
|
||||
{id: 2, title: 'RGRID-Ped', subTitle: '无人机Remote ID远程识别模块', imgUrl: 'product/detail/1.png'},
|
||||
{id: 3, title: 'RGRID-Mob', subTitle: '无人机Remote ID远程识别手持设备', imgUrl: 'product/detail/4.png'},
|
||||
])
|
||||
|
||||
// 点击标题跳转详情页
|
||||
function titleClick(item) {
|
||||
console.log('title clicked:', item)
|
||||
router.push({
|
||||
path: '/product/detail',
|
||||
query: {
|
||||
type: 'monitorSystem',
|
||||
id: item.id,
|
||||
title: item.title,
|
||||
subTitle: item.subTitle,
|
||||
imgUrl: item.imgUrl,
|
||||
},
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -13,55 +45,46 @@ onMounted(() => {})
|
||||
<Banner class="banner" img="banner/product.png" />
|
||||
<Swiper
|
||||
id="one"
|
||||
title="产品体系"
|
||||
:title="title"
|
||||
v-model="currentPage"
|
||||
:data="[1, 2, 3, 4]"
|
||||
:page-size="2"
|
||||
:data="swiperItem"
|
||||
:page-size="3"
|
||||
:show-pagination="false"
|
||||
:auto-play="false"
|
||||
:sourceHeight="400"
|
||||
:source-gap="80"
|
||||
>
|
||||
<template #default="{item, index, isActive}">
|
||||
<div class="my-card" :class="{active: isActive}">
|
||||
<h2>{{ item }}</h2>
|
||||
</div>
|
||||
</template>
|
||||
</Swiper>
|
||||
<Swiper
|
||||
id="two"
|
||||
title="软件产品"
|
||||
v-model="currentPage"
|
||||
:data="[1, 2, 3, 4]"
|
||||
:page-size="2"
|
||||
:show-pagination="false"
|
||||
:auto-play="false"
|
||||
>
|
||||
<template #default="{item, index, isActive}">
|
||||
<div class="my-card" :class="{active: isActive}">
|
||||
<h2>{{ item }}</h2>
|
||||
</div>
|
||||
</template>
|
||||
</Swiper>
|
||||
<Swiper
|
||||
id="three"
|
||||
title="硬件产品"
|
||||
v-model="currentPage"
|
||||
:data="[1, 2, 3, 4]"
|
||||
:page-size="2"
|
||||
:show-pagination="false"
|
||||
:auto-play="false"
|
||||
>
|
||||
<template #default="{item, index, isActive}">
|
||||
<div class="my-card" :class="{active: isActive}">
|
||||
<h2>{{ item }}</h2>
|
||||
<div class="content" @click="titleClick(item)">
|
||||
<div class="top">
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div class="sub-title">{{ item.subTitle }}</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<img :src="`./static/images/${item.imgUrl}`" class="img" :class="{active: isActive}" />
|
||||
</div>
|
||||
</template>
|
||||
</Swiper>
|
||||
|
||||
<Project />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.my-card {
|
||||
background: #d9d9d9;
|
||||
.content {
|
||||
height: 100%;
|
||||
.top {
|
||||
background-color: #eee;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: $black;
|
||||
}
|
||||
.img {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
95
src/views/product/project.vue
Normal file
95
src/views/product/project.vue
Normal file
@ -0,0 +1,95 @@
|
||||
<script setup>
|
||||
import Swiper from '@/components/Swiper/index.vue'
|
||||
import {ref, onMounted} from 'vue'
|
||||
onMounted(() => {})
|
||||
|
||||
// 资质证书
|
||||
const certificateWidth = ref(1300)
|
||||
const certificateHeight = ref(500)
|
||||
|
||||
const currentPage = ref(1)
|
||||
|
||||
const imgList = [
|
||||
{
|
||||
id: 1,
|
||||
list: [
|
||||
{id: 1, width: 290, height: 188, label: '智慧物流配送', img: 'product/1.png'},
|
||||
{id: 2, width: 210, height: 280, label: '城市低空交通管理', img: 'product/5.png'},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
list: [
|
||||
{id: 2.1, width: 290, height: 188, label: '大型活动保障', img: 'product/2.png'},
|
||||
{id: 2.2, width: 210, height: 280, label: '区域低空监管组网', img: 'product/6.png'},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
list: [
|
||||
{id: 3.1, width: 290, height: 188, label: '关键基础设施守护', img: 'product/3.png'},
|
||||
{id: 3.2, width: 210, height: 280, label: '要地防控', img: 'product/7.png'},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
list: [
|
||||
{id: 4.1, width: 290, height: 188, label: '规模化无人机巡检', img: 'product/4.png'},
|
||||
{id: 4.2, width: 210, height: 280, label: '移动式低空安防', img: 'product/8.png'},
|
||||
],
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page">
|
||||
<Swiper
|
||||
id="certificate"
|
||||
title="应用案例"
|
||||
v-model="currentPage"
|
||||
:source-width="certificateWidth"
|
||||
:source-height="certificateHeight"
|
||||
:show-pagination="false"
|
||||
:auto-play="false"
|
||||
:showHover="false"
|
||||
>
|
||||
<template #default="{item, index, isActive}">
|
||||
<div class="certificate flex j-s a-c" :class="{active: isActive}">
|
||||
<div
|
||||
v-for="(list, listIdx) in imgList"
|
||||
:index="list.id"
|
||||
class="flex j-c a-c wrap"
|
||||
:class="{'last-row': listIdx === imgList.length - 1}"
|
||||
>
|
||||
<div v-for="(img, imgIndex) in list.list" :key="imgIndex">
|
||||
<div class="label">{{ img.label }}</div>
|
||||
<img
|
||||
:style="{
|
||||
width: $fontSize(img.width) + 'px',
|
||||
height: $fontSize(img.height) + 'px',
|
||||
margin: `5px ${$fontSize(10)}px`,
|
||||
cursor: 'pointer',
|
||||
}"
|
||||
:src="`./static/images/${img.img}`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Swiper>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#certificate {
|
||||
// margin-top: 60px;
|
||||
.certificate {
|
||||
margin-top: 40px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.label {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,11 +1,45 @@
|
||||
<script setup>
|
||||
import {ref, onMounted} from 'vue'
|
||||
import {ref, onMounted, computed} from 'vue'
|
||||
import Swiper from '@/components/Swiper/index.vue'
|
||||
import Banner from '@/components/Banner/index.vue'
|
||||
import {findLabelByUrl} from '@/utils'
|
||||
|
||||
import {useNavStore} from '@/store/nav'
|
||||
const navStore = useNavStore()
|
||||
|
||||
import {useRouter} from 'vue-router'
|
||||
const router = useRouter()
|
||||
|
||||
const title = computed(() => findLabelByUrl(window.nav.header, navStore.navIndex))
|
||||
|
||||
const swiperWidth = ref(1300)
|
||||
const swiperHeight = ref(500)
|
||||
|
||||
onMounted(() => {})
|
||||
|
||||
const currentPage = ref(1)
|
||||
|
||||
onMounted(() => {})
|
||||
const swiperItem = ref([
|
||||
{id: 1, img: '', title: '低空全域运营中枢'},
|
||||
{id: 2, img: '', title: '无人机精准识别与管控系统'},
|
||||
{id: 3, img: '', title: '开放式反制协同指挥平台'},
|
||||
{id: 4, img: '', title: '全自动智能巡检作业平台'},
|
||||
{id: 5, img: '', title: '低空数字孪生与推演平台'},
|
||||
])
|
||||
|
||||
// 点击标题跳转详情页
|
||||
function titleClick(item) {
|
||||
console.log('title clicked:', item)
|
||||
router.push({
|
||||
path: '/product/detail',
|
||||
query: {
|
||||
type: 'remoteDevice',
|
||||
id: item.id,
|
||||
title: item.title,
|
||||
img: item.img,
|
||||
},
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -13,46 +47,23 @@ onMounted(() => {})
|
||||
<Banner class="banner" img="banner/product.png" />
|
||||
<Swiper
|
||||
id="one"
|
||||
title="产品体系"
|
||||
:title="title"
|
||||
v-model="currentPage"
|
||||
:data="[1, 2, 3, 4]"
|
||||
:page-size="2"
|
||||
:show-pagination="false"
|
||||
:auto-play="false"
|
||||
:source-width="swiperWidth"
|
||||
:source-height="swiperHeight"
|
||||
:showHover="false"
|
||||
>
|
||||
<template #default="{item, index, isActive}">
|
||||
<div class="my-card" :class="{active: isActive}">
|
||||
<h2>{{ item }}</h2>
|
||||
</div>
|
||||
</template>
|
||||
</Swiper>
|
||||
<Swiper
|
||||
id="two"
|
||||
title="软件产品"
|
||||
v-model="currentPage"
|
||||
:data="[1, 2, 3, 4]"
|
||||
:page-size="2"
|
||||
:show-pagination="false"
|
||||
:auto-play="false"
|
||||
>
|
||||
<template #default="{item, index, isActive}">
|
||||
<div class="my-card" :class="{active: isActive}">
|
||||
<h2>{{ item }}</h2>
|
||||
</div>
|
||||
</template>
|
||||
</Swiper>
|
||||
<Swiper
|
||||
id="three"
|
||||
title="硬件产品"
|
||||
v-model="currentPage"
|
||||
:data="[1, 2, 3, 4]"
|
||||
:page-size="2"
|
||||
:show-pagination="false"
|
||||
:auto-play="false"
|
||||
>
|
||||
<template #default="{item, index, isActive}">
|
||||
<div class="my-card" :class="{active: isActive}">
|
||||
<h2>{{ item }}</h2>
|
||||
<div class="content flex j-s a-c wrap" @click="titleClick(item)">
|
||||
<div v-for="list in swiperItem" :key="list.id" class="list">
|
||||
<div class="top">
|
||||
<div class="title">{{ list.title }}</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="my-card" :class="{active: isActive}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Swiper>
|
||||
@ -60,8 +71,21 @@ onMounted(() => {})
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.my-card {
|
||||
background: #d9d9d9;
|
||||
.content {
|
||||
height: 100%;
|
||||
border: 1px solid red;
|
||||
.top {
|
||||
background-color: #eee;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: $black;
|
||||
}
|
||||
.img {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user