diff --git a/lib/pages/security_page/models/security_style_model.dart b/lib/pages/security_page/models/security_style_model.dart
new file mode 100644
index 0000000..1a84962
--- /dev/null
+++ b/lib/pages/security_page/models/security_style_model.dart
@@ -0,0 +1,79 @@
+import 'package:zhiying_comm/zhiying_comm.dart';
+
+class SecurityStyleModel {
+  String appBarName;
+  String appBarNameColor;
+  String appBarBgColor;
+  String accountDeleteText;
+  String accountDeleteTextColor;
+  String settingsBgColor;
+  List<SecurityStyleItemModel> settings;
+
+  SecurityStyleModel(
+      {this.appBarName,
+      this.appBarNameColor,
+      this.appBarBgColor,
+      this.accountDeleteText,
+      this.accountDeleteTextColor,
+      this.settingsBgColor,
+      this.settings});
+
+  SecurityStyleModel.fromJson(Map<String, dynamic> json) {
+    appBarName = json['app_bar_name'];
+    appBarNameColor = json['app_bar_name_color'];
+    appBarBgColor = json['app_bar_bg_color'];
+    accountDeleteText = json['account_delete_text'];
+    accountDeleteTextColor = json['account_delete_text_color'];
+    settingsBgColor = json['settings_bg_color'];
+    if (json['settings'] != null) {
+      settings = new List<SecurityStyleItemModel>();
+      json['settings'].forEach((v) {
+        settings.add(new SecurityStyleItemModel.fromJson(v));
+      });
+    }
+  }
+
+  Map<String, dynamic> toJson() {
+    final Map<String, dynamic> data = new Map<String, dynamic>();
+    data['app_bar_name'] = this.appBarName;
+    data['app_bar_name_color'] = this.appBarNameColor;
+    data['app_bar_bg_color'] = this.appBarBgColor;
+    data['account_delete_text'] = this.accountDeleteText;
+    data['account_delete_text_color'] = this.accountDeleteTextColor;
+    data['settings_bg_color'] = this.settingsBgColor;
+    if (this.settings != null) {
+      data['settings'] = this.settings.map((v) => v.toJson()).toList();
+    }
+    return data;
+  }
+}
+
+class SecurityStyleItemModel extends SkipModel {
+  List<String> dataKeys;
+  String name;
+  String nameColor;
+  String descColor;
+
+  // 绑定状态，本地标记
+  bool isBind;
+  String desc;
+
+  SecurityStyleItemModel(
+      {this.dataKeys, this.name, this.nameColor, this.descColor});
+
+  SecurityStyleItemModel.fromJson(Map<String, dynamic> json) {
+    dataKeys = json['data_keys'].cast<String>();
+    name = json['name'];
+    nameColor = json['name_color'];
+    descColor = json['desc_color'];
+  }
+
+  Map<String, dynamic> toJson() {
+    final Map<String, dynamic> data = super.toJson();
+    data['data_keys'] = this.dataKeys;
+    data['name'] = this.name;
+    data['name_color'] = this.nameColor;
+    data['desc_color'] = this.descColor;
+    return data;
+  }
+}
diff --git a/lib/pages/security_page/security_page.dart b/lib/pages/security_page/security_page.dart
index 9caa9d2..1e4bec1 100644
--- a/lib/pages/security_page/security_page.dart
+++ b/lib/pages/security_page/security_page.dart
@@ -1,5 +1,9 @@
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import 'package:zhiying_base_widget/pages/security_page/models/security_style_model.dart';
+import 'package:zhiying_base_widget/pages/security_page/security_page_bloc.dart';
+import 'package:zhiying_comm/util/base_bloc.dart';
 import 'package:zhiying_comm/zhiying_comm.dart';
 
 class SecurityPage extends StatefulWidget {
@@ -14,13 +18,65 @@ class SecurityPage extends StatefulWidget {
 class _SecurityPageState extends State<SecurityPage> {
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: _createNav(),
+    return BlocProvider<SecurityPageBloc>(
+      bloc: SecurityPageBloc(),
+      child: _SecurityContainer(widget.data),
     );
   }
+}
+
+class _SecurityContainer extends StatefulWidget {
+  final Map<String, dynamic> data;
+
+  const _SecurityContainer(
+    this.data, {
+    Key key,
+  }) : super(key: key);
+
+  @override
+  _SecurityContainerState createState() => _SecurityContainerState();
+}
+
+class _SecurityContainerState extends State<_SecurityContainer> {
+  SecurityPageBloc _bloc;
+
+  @override
+  void initState() {
+    _bloc = BlocProvider.of<SecurityPageBloc>(context);
+    _bloc.loadData(widget.data['skip_identifier']);
+
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return StreamBuilder<SecurityStyleModel>(
+        stream: _bloc.outData,
+        builder: (BuildContext context, AsyncSnapshot snapshot) {
+          SecurityStyleModel style = snapshot.data;
+
+          List<Widget> widgets = List();
+          widgets.addAll(style?.settings?.map((item) {
+                return _createItem(item);
+              })?.toList() ??
+              []);
+          widgets.add(Provider.of<UserInfoNotifier>(context).userInfo == null
+              ? Container()
+              : _createLogout());
+
+          return Scaffold(
+              backgroundColor: Color(0xfff9f9f9),
+              appBar: _createNav(style),
+              body: SingleChildScrollView(
+                child: Column(
+                  children: widgets,
+                ),
+              ));
+        });
+  }
 
   // 导航栏
-  Widget _createNav() {
+  Widget _createNav(SecurityStyleModel style) {
     return CupertinoNavigationBar(
       border: Border(
         bottom: BorderSide(
@@ -28,7 +84,7 @@ class _SecurityPageState extends State<SecurityPage> {
           style: BorderStyle.none,
         ),
       ),
-      backgroundColor: Color(0xfff9f9f9),
+      backgroundColor: HexColor.fromHex(style?.appBarBgColor ?? '#ffffff'),
       leading: Navigator.canPop(context)
           ? GestureDetector(
               child: Container(
@@ -46,12 +102,79 @@ class _SecurityPageState extends State<SecurityPage> {
             )
           : Container(),
       middle: Text(
-        '账号安全',
+        style?.appBarName ?? '账号安全',
         style: TextStyle(
           fontSize: 15,
-          color: HexColor.fromHex('#333333'),
+          color: HexColor.fromHex(style?.appBarNameColor ?? '#333333'),
+        ),
+      ),
+    );
+  }
+
+  Widget _createItem(SecurityStyleItemModel item) {
+    return GestureDetector(
+      child: Container(
+        padding: EdgeInsets.only(left: 12.5, right: 12.5),
+        width: double.infinity,
+        height: 50,
+        color: Colors.white,
+        child: Row(
+          children: <Widget>[
+            Expanded(
+              child: Text(
+                item.name,
+                style: TextStyle(
+                  fontSize: 13,
+                  color: HexColor.fromHex(item?.nameColor ?? '#333333'),
+                  fontWeight: FontWeight.bold,
+                ),
+              ),
+            ),
+            Expanded(
+              child: Text(
+                item.desc ?? '',
+                textAlign: TextAlign.right,
+                style: TextStyle(
+                  fontSize: 13,
+                  color: HexColor.fromHex(item?.descColor ?? '#333333'),
+                ),
+              ),
+            ),
+            Icon(
+              Icons.arrow_forward_ios,
+              size: 14,
+              color: Color(0xff999999),
+            )
+          ],
+        ),
+      ),
+      onTap: () {
+        RouterUtil.route(item, item.toJson(), context);
+      },
+    );
+  }
+
+  Widget _createLogout() {
+    return GestureDetector(
+      child: Container(
+        color: Colors.white,
+        width: double.infinity,
+        height: 50,
+        margin: EdgeInsets.only(top: 10),
+        child: Center(
+          child: Text(
+            '账号注销',
+            style: TextStyle(
+              fontSize: 13,
+              color: Color(0xffff4242),
+              fontWeight: FontWeight.bold,
+            ),
+          ),
         ),
       ),
+      onTap: () {
+        Logger.debug('账号注销');
+      },
     );
   }
 }
diff --git a/lib/pages/security_page/security_page_bloc.dart b/lib/pages/security_page/security_page_bloc.dart
new file mode 100644
index 0000000..6eb4647
--- /dev/null
+++ b/lib/pages/security_page/security_page_bloc.dart
@@ -0,0 +1,63 @@
+import 'dart:async';
+import 'dart:convert' as convert;
+
+import 'package:zhiying_base_widget/pages/security_page/models/security_style_model.dart';
+import 'package:zhiying_comm/util/base_bloc.dart';
+import 'package:zhiying_comm/zhiying_comm.dart';
+
+class SecurityPageBloc extends BlocBase {
+  SecurityStyleModel _style;
+  Map<String, dynamic> _securityStatus;
+
+  StreamController<SecurityStyleModel> _styleController =
+      StreamController<SecurityStyleModel>();
+
+  Stream<SecurityStyleModel> get outData => _styleController.stream;
+
+  @override
+  void dispose() {
+    _styleController.close();
+    _styleController = null;
+  }
+
+  void loadData(String skipIdentifier) async {
+    Api api = Api(
+      '/api/v1/mod/${skipIdentifier.toString()}',
+      method: NetMethod.GET,
+    );
+    _loadData(await api.onCache());
+
+    _securityStatus = Map<String, dynamic>.from(await _getStatus());
+    _loadData(await api.onRequest());
+  }
+
+  // 获取授权状态等信息
+  Future<Map> _getStatus() {
+    Api api = Api(
+      '/api/v1/settings/account/security',
+      method: NetMethod.GET,
+    );
+    return api.onRequest();
+  }
+
+  void _loadData(dynamic data) {
+    Map<String, dynamic> json = Map<String, dynamic>.from(data);
+    if (json == null || json.length == 0) {
+      return;
+    }
+    String d = json['data'];
+    Map<String, dynamic> da = Map<String, dynamic>.from(convert.jsonDecode(d));
+    _style = SecurityStyleModel.fromJson(da);
+
+    if (_securityStatus != null) {
+      _style.settings.forEach((item) {
+        List<String> keys = item.dataKeys;
+        if (keys.length > 0) {
+          item.desc = _securityStatus[keys.first] ?? '';
+        }
+      });
+    }
+
+    _styleController.add(_style);
+  }
+}
diff --git a/lib/pages/setting_page/models/setting_page_style_item_model.dart b/lib/pages/setting_page/models/setting_page_style_item_model.dart
index f9c7585..ad2abd9 100644
--- a/lib/pages/setting_page/models/setting_page_style_item_model.dart
+++ b/lib/pages/setting_page/models/setting_page_style_item_model.dart
@@ -5,35 +5,24 @@ class SettingPageStyleItemModel extends SkipModel {
   String nameColor;
   String desc;
   String descColor;
-  String skipIdentifier;
-  String url;
 
   SettingPageStyleItemModel(
-      {this.name,
-        this.nameColor,
-        this.desc,
-        this.descColor,
-        this.skipIdentifier,
-        this.url});
+      {this.name, this.nameColor, this.desc, this.descColor});
 
   SettingPageStyleItemModel.fromJson(Map<String, dynamic> json) {
+    super.fromJson(json);
     name = json['name'];
     nameColor = json['name_color'];
     desc = json['desc'];
     descColor = json['desc_color'];
-    skipIdentifier = json['skip_identifier'];
-    url = json['url'];
   }
 
   Map<String, dynamic> toJson() {
-    final Map<String, dynamic> data = new Map<String, dynamic>();
+    final Map<String, dynamic> data = super.toJson();
     data['name'] = this.name;
     data['name_color'] = this.nameColor;
     data['desc'] = this.desc;
     data['desc_color'] = this.descColor;
-    data['skip_identifier'] = this.skipIdentifier;
-    data['url'] = this.url;
     return data;
   }
 }
-