<!-- * @Author: jiangzaicheng jiangzaicheng_jzc@163.com * @Date: 2022-07-05 14:05:30 * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com * @LastEditTime: 2022-07-13 17:42:26 * @FilePath: \mcep-h5\src\views\main\MainView.vue * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE --> <template> <div> <product-detail class="productName" :productName="productName"></product-detail> <product-card :money="money" :moneyName="moneyName" class="productCard"> </product-card> </div> </template> <script lang="ts"> import { Component, Vue } from "vue-property-decorator"; import { ProductData } from '@/model/entity/ProductData' @Component({ name: "ProductDetails", }) export default class ProductDetails extends Vue { productName="小微企业---互助贷款" money: string = "¥5000000" //最高额度 moneyName: string = "五百万元整" //最高额度汉字 activeNames=["1"] } </script> <style scoped lang="scss"> .productName { height: 38vh; } .productCard { // position: absolute; // top: 10%; // left: 4%; // right: 4%; // width: 100%; // height: 31%; // margin: 2% auto; // border-radius: 15px; // display: flex; // font-weight: 400; // font-style: normal; position: absolute; top: 13%; /* left: calc(100vh - -15px); */ margin: 0px auto; right: 4%; width: 90%; height: 30%; /* margin: 2% auto; */ border-radius: 15px; /* display: flex; */ font-weight: 400; font-style: normal; } // .producy{ // position: absolute; // top: 10%; // left: 4%; // right: 4%; // width: 100%; // height: 31%; // margin: 2% auto; // border-radius: 15px; // display: flex; // font-weight: 400; // font-style: normal; // } </style>