Page-v2 布局组件

基础用法

点击查看示例代码

vue

<template>
  <h-page-v2 :h_data="h_page_v2"></h-page-v2>
</template>

<script setup>
const h_page_v2 =  {
  component: 'h-page-v2',
  top:{
    component: 'h-header-v2',
    theme: 'dark',
    items: [{
        component: 'h-menu-v2',
        items: [{
            name: 'logo',
            image: 'https://tailwindui.com/image/logos/mark.svg?color=indigo&shade=500',
            name: '高校软件测试实训平台',
            link: '/project/1',
          },
          {
            name: 'herderv2',
            name: '项目管理',
            items: [{
                name: 'demo21',
                name: '项目管理1',
                link: '/project/21',
              },
              {
                name: 'demo22',
                name: '项目管理2',
                link: '/project/22',
              },
              {
                name: 'demo23',
                name: '项目管理3',
                link: '/project/23',
              }
            ]
          },
          {
            name: 'demo2',
            name: '学习中心',
            items: [{
                name: 'demo21',
                name: '学习中心1',
                link: '/project/21',
              },
              {
                name: 'demo22',
                name: '学习中心2',
                link: '/project/22',
              },
              {
                name: 'demo23',
                name: '学习中心3',
                link: '/project/23',
              }
            ]
          },
          {
            name: 'demo3',
            name: '项目分配',
            link: '/project/3',
          },
          {
            name: 'demo4',
            name: '模板项目',
            link: '/project/4',
          },
          {
            name: 'demo5',
            name: '题库',
            link: '/project/5',
          },
        ],
      },
      {
        component: 'h-menu-v2',
        items: [{
            name: 'avatar',
            name: '我是头像',
            image: 'https://gitlab.ceshiren.com/uploads/-/system/user/avatar/79/avatar.png?width=24',
          },
          {
            name: 'demo6',
            icon: 'fa fa-user',
            name: '时间覆盖一切',
            description: '身份：老师',
          },
          {
            name: 'demo7',
            name: '管理员页面',
            link: '/project/7',
          },
          {
            name: 'demo8',
            name: '退出',
            link: '/project/8',
          },
        ],
      }
    ]
  },
  aside:{
    component: 'h-aside-v2',
    theme: 'dark',
    items: [{
      component: 'h-menu-v2',
      items: [{
          name: 'asidev2',
          name: '测试管理',
          link: '/project/21',
          icon: 'fa fa-lg fa-user'
        },
        {
          name: 'demo21',
          name: '测试管理',
          link: '/project/21',
          icon: 'fa fa-lg fa-apple',
          items: [{
            name: 'demo21',
            name: '测试管理',
            link: '/project/21',
          }, {
            name: 'demo21',
            name: '测试管理',
            link: '/project/21',
          }, {
            name: 'demo21',
            name: '测试管理',
            link: '/project/21',
          }, ]
        },
        {
          name: 'demo21',
          name: '测试管理',
          link: '/project/21',
          icon: 'fa fa-lg fa-close'
        },
        {
          name: 'demo21',
          name: '测试管理',
          link: '/project/21',
          icon: 'fa fa-lg fa-bars'
        },
        {
          name: 'demo21',
          name: '测试管理',
          link: '/project/21',
          icon: 'fa fa-lg fa-book'
        },
      ]
    }]
  },
  items: [
    {
      component: 'h-card-v2',
      class:'h-row-1 h-left h-content-2',
      content: [
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
      ]
    }
  ]
}
</script>

<template>
  <h-page-v2 :h_data="h_page_v2"></h-page-v2>
</template>

<script setup>
const h_page_v2 =  {
  component: 'h-page-v2',
  top:{
    component: 'h-header-v2',
    theme: 'dark',
    items: [{
        component: 'h-menu-v2',
        items: [{
            name: 'logo',
            image: 'https://tailwindui.com/image/logos/mark.svg?color=indigo&shade=500',
            name: '高校软件测试实训平台',
            link: '/project/1',
          },
          {
            name: 'herderv2',
            name: '项目管理',
            items: [{
                name: 'demo21',
                name: '项目管理1',
                link: '/project/21',
              },
              {
                name: 'demo22',
                name: '项目管理2',
                link: '/project/22',
              },
              {
                name: 'demo23',
                name: '项目管理3',
                link: '/project/23',
              }
            ]
          },
          {
            name: 'demo2',
            name: '学习中心',
            items: [{
                name: 'demo21',
                name: '学习中心1',
                link: '/project/21',
              },
              {
                name: 'demo22',
                name: '学习中心2',
                link: '/project/22',
              },
              {
                name: 'demo23',
                name: '学习中心3',
                link: '/project/23',
              }
            ]
          },
          {
            name: 'demo3',
            name: '项目分配',
            link: '/project/3',
          },
          {
            name: 'demo4',
            name: '模板项目',
            link: '/project/4',
          },
          {
            name: 'demo5',
            name: '题库',
            link: '/project/5',
          },
        ],
      },
      {
        component: 'h-menu-v2',
        items: [{
            name: 'avatar',
            name: '我是头像',
            image: 'https://gitlab.ceshiren.com/uploads/-/system/user/avatar/79/avatar.png?width=24',
          },
          {
            name: 'demo6',
            icon: 'fa fa-user',
            name: '时间覆盖一切',
            description: '身份：老师',
          },
          {
            name: 'demo7',
            name: '管理员页面',
            link: '/project/7',
          },
          {
            name: 'demo8',
            name: '退出',
            link: '/project/8',
          },
        ],
      }
    ]
  },
  aside:{
    component: 'h-aside-v2',
    theme: 'dark',
    items: [{
      component: 'h-menu-v2',
      items: [{
          name: 'asidev2',
          name: '测试管理',
          link: '/project/21',
          icon: 'fa fa-lg fa-user'
        },
        {
          name: 'demo21',
          name: '测试管理',
          link: '/project/21',
          icon: 'fa fa-lg fa-apple',
          items: [{
            name: 'demo21',
            name: '测试管理',
            link: '/project/21',
          }, {
            name: 'demo21',
            name: '测试管理',
            link: '/project/21',
          }, {
            name: 'demo21',
            name: '测试管理',
            link: '/project/21',
          }, ]
        },
        {
          name: 'demo21',
          name: '测试管理',
          link: '/project/21',
          icon: 'fa fa-lg fa-close'
        },
        {
          name: 'demo21',
          name: '测试管理',
          link: '/project/21',
          icon: 'fa fa-lg fa-bars'
        },
        {
          name: 'demo21',
          name: '测试管理',
          link: '/project/21',
          icon: 'fa fa-lg fa-book'
        },
      ]
    }]
  },
  items: [
    {
      component: 'h-card-v2',
      class:'h-row-1 h-left h-content-2',
      content: [
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
      ]
    }
  ]
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205

Page-v2 布局组件

基础用法

无顶部栏-top字段不传

无侧边栏栏-aside字段不传

Page-v2 布局组件 ​

基础用法 ​

无顶部栏-top字段不传 ​

无侧边栏栏-aside字段不传 ​

Page-v2 布局组件

基础用法

无顶部栏-top字段不传

无侧边栏栏-aside字段不传