<style lang='less'>
page {
    height: 100%;
    background: #ebf5fa;
}
.percsonal-center {
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;

    .imgst {
        width: 100%;
        height: 784rpx;
        background-color: #ebf5fa;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;

    }
    .contain {
        padding-top: 240rpx;
        position: relative;
        z-index: 1;
        .head {
            display: flex;
            align-items: center;
            .imgHead {
                margin-left: 56rpx;
                margin-right: 20rpx;
                width: 128rpx;
                height: 128rpx;
            }
            .p-name {
                margin-right: 8rpx;
                font-family: PingFang SC;
                font-size: 44rpx;
                font-weight: 600;
                line-height: 64rpx;
                color: #1b2129;
            }
            .p-comp {
                padding-top: 8rpx;
                font-family: PingFang SC;
                font-size: 28rpx;
                font-weight: 400;
                line-height: 44rpx;
                color: #626c78;
            }
        }
        .content {
            padding: 40rpx;
            padding-top: 64rpx;
            .card-box {
                display: flex;
                justify-content: space-between;
                padding-bottom: 20rpx;
                .little-card {
                    text-align: center;
                    width: 326rpx;
                    height: 200rpx;
                    padding-top: 36rpx;
                    border-radius: 40rpx;
                    box-sizing: border-box;
                    background: #ffffff;
                    .little-imgst {
                        width: 64rpx;
                        height: 64rpx;
                    }
                    .text {
                        padding-top: 8rpx;
                        font-family: PingFang SC;
                        font-size: 32rpx;
                        font-weight: 400;
                        line-height: 48rpx;
                        color: #1b2129;
                    }
                }
                .hover-st {
                    background: #f1f4f6;
                }
            }
            .big-card {
                width: 670rpx;
                height: 288rpx;
                padding: 24rpx 0px 24rpx 0px;
                border-radius: 40rpx;
                box-sizing: border-box;
                background: #ffffff;
                .each-row {
                    width: 100%;
                    height: 120rpx;
                    padding-left: 40rpx;
                    display: flex;
                    align-items: center;
                    .each-row-imgst {
                        width: 48rpx;
                        height: 48rpx;
                        margin-right: 24rpx;
                    }
                    .each-row-text {
                        font-family: PingFang SC;
                        font-size: 32rpx;
                        font-weight: 400;
                        line-height: 48rpx;
                        color: #1b2129;
                    }
                }
                .hover-st {
                    background: #f1f4f6;
                }
            }
        }
    }
}
</style>
<!-- 个人中心 -->
<template>
    <div class="percsonal-center">
        <page-top-bar icon="{{h5Static+'/page-top-bar/return-icon.svg'}}"></page-top-bar>
        <image
            class="imgst"
            src="{{h5StaticPath}}/bg-personal.png"
            mode="widthFix"
            alt
        />
        <div class="contain">
            <div class="head">
                <image
                    class="imgHead"
                    src="{{h5StaticPath}}/no-person.png"
                />
                <div @click="goToPersonalInfo">
                    <div>
                        <span class="p-name">纳兰词</span>
                        <image
                            style="width: 24rpx;height: 24rpx;"
                            src="{{h5StaticPath}}/icon-arrow-right.svg"
                        />
                    </div>
                    <div class="p-comp">上格云智能技术有限公司</div>
                </div>
            </div>
            <div class="content">
                <div class="card-box">
                    <div
                        hover-class="hover-st"
                        hover-style-time="100"
                        class="little-card"
                    >
                        <image
                            class="little-imgst"
                            src="{{h5StaticPath}}/icon-leaf.png"
                        />
                        <div class="text">我的习惯</div>
                    </div>
                    <div
                        hover-class="hover-st"
                        hover-style-time="100"
                        class="little-card"
                        @click="handleAdd(true)"
                    >
                        <image
                            class="little-imgst"
                            src="{{h5StaticPath}}/icon-to-desk.png"
                        />
                        <div class="text">添加到桌面</div>
                    </div>
                </div>
                <div class="big-card">
                    <div
                        hover-class="hover-st"
                        hover-style-time="100"
                        v-for="item in arr"
                        :key="item.icon"
                        class="each-row"
                        @click="toPage(item.url)"
                    >
                        <image
                            class="each-row-imgst"
                            src="{{h5StaticPath}}/{{item.icon}}"
                        />
                        <span class="each-row-text">{{item.name}}</span>
                    </div>
                </div>

            </div>
        </div>
        <footer :IsShowPhone="IsShowPhone"></footer>
        <add-miniprogram-to-desk-panel
            :show="isShowAddminiProgramToDesk"
            @component-add-miniprogram-to-desk-panel-close="handleAdd(false)"
            :showBottomButton="false"
        ></add-miniprogram-to-desk-panel>
    </div>
</template>

<script>
import wepy from '@wepy/core'
import config from '@/config'
wepy.page({
  components: {},
  props: {},
  data: {
    h5StaticPath: config.h5StaticPath + '/page-personalCenter',
    h5Static: config.h5StaticPath,
    isShowAddminiProgramToDesk: false,
    IsShowPhone: true,
    arr: [
            // { name: '问题反馈', icon: 'icon-message.svg', url: '' },
            { name: '操作指引', icon: 'icon-guid.svg', url: '/packagesEnv/pages/personalCenter/operating' },
            { name: '关于小飒指控', icon: 'icon-tip.svg', url: '/packagesEnv/pages/personalCenter/xiaosa' }
    ]
  },
  computed: {},
  methods: {
    handleAdd(val) {
      this.isShowAddminiProgramToDesk = val
    },
    toPage(url) {
      wx.navigateTo({
        url: url
      })
    },
    goToPersonalInfo() {
      wx.navigateTo({
        url: '/packagesEnv/pages/personalCenter/personalInfo'
      })
    }

  },
    // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
    // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  }
})
</script>
<config>
{
    'navigationBarTitleText': '',
    navigationStyle:"custom",
    backgroundColor: '#EBF5FA',
    usingComponents: {
        'page-top-bar': '~@/components/common/page-top-bar', 
        'add-miniprogram-to-desk-panel': './component/add-miniprogram-to-desk-panel', 
        'footer':'./footer'     
    },
    "componentPlaceholder": {
        "add-miniprogram-to-desk-panel": "view",
    }
}
</config>
