<template>
    <div class="news-details-container mt16">
        <div class="nav-container flex">
            <div class="nr" style="width: 70px">当前位置：</div>
            <el-breadcrumb style="flex: 1;" separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item class="line1">关于我们</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="content-box">
            <div class="news-detail-box">
                <div class="content-header bg-white">
                    <div class="news-detail-title">
                       关于我们
                    </div>
                </div>
                <div class="content-html-box bg-white">
                    <div v-html="detailsObj.content"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        head() {
            return {
                title: this.$store.getters.headTitle,
                link: [{
                    rel: "icon",
                    type: "image/x-icon",
                    href: this.$store.getters.favicon
                }],
            };
        },
        async asyncData({
            $get,
            $post,
            query
        }) {
            let detailsObj = {};
            
            let res = await $get("policy/aboutUs", {});
            if (res.code == 1) {
                detailsObj = res.data;
               
            }
            return {
                detailsObj,
                
            };
        },

        data() {
            return {
               
            }
        },
        mounted() {
            console.log('route', this.$route)
           
        },
        methods: {
            
        }
    }
</script>

<style lang="scss" scoped>
    .news-details-container {
        .nav-container {
            padding: 15px 16px;
        }

        .content-box {
            display: flex;
            flex-direction: row;

            .news-detail-box {
                background-color: #FFFFFF;
                width: 100%;

                .content-header {
                    margin: 0px 20px;
                    padding: 20px 0px;
                    border-bottom: 1px solid #e5e5e5;

                    .news-detail-title {
                        color: #222;
                        font-size: 24px;
                        font-weight: 500;
                    }
                }

                .content-html-box {
                    padding: 24px 20px;

                    &>div {
                        width: 100%;
                        overflow: hidden;

                        ::v-deep img {
                            width: 100%;
                        }
                    }
                }
            }

            .recommend-box {
                width: 264px;

                .recommend-box-header {
                    padding: 15px 10px;
                    border-bottom: 1px solid #e5e5e5;

                    .primary-line {
                        margin-right: 10px;
                        background-color: $--color-primary;
                        width: 4px;
                        height: 20px;
                    }
                }

                .recommend-box-content {
                    .recommend-list-container {
                        .recommend-list-item {
                            padding: 10px;
                            cursor: pointer;

                            .goods-info {
                                margin-top: 8px;
                            }
                        }
                    }
                }
            }
        }
    }
</style>